/* Guest-focused refinements to the invitation's ivory, floral and warm taupe palette. */
:root {
  --paper: #fffbf7;
  --ink: #c8a99a;
  --ink-strong: #c8a99a;
  --panel-ink: var(--paper);
  --taupe: #c8a99a;
  --rule: #c8a99a;
  --section-title-size: clamp(40px, 5vw, 64px);
  --section-title-spacing: clamp(12px, 1.5vw, 19px);
  --header-offset: 96px;
}

body { min-width: 0; color: var(--ink); font: 13px/1.5 "Poppins-Thin", sans-serif; letter-spacing: 1px; }
p { color: var(--ink); font: 13px/1.8 "Poppins-Thin", sans-serif; letter-spacing: 1px; }
h4 { color: var(--ink); font: 14px/1.8 "Poppins-Thin", sans-serif; letter-spacing: 1px; }
h5 { color: var(--ink); font: 15px/44px "Poppins-Thin", sans-serif; letter-spacing: 1px; }
h2 { font: var(--section-title-size)/1.5 "Poppins-Regular", sans-serif; letter-spacing: var(--section-title-spacing); color: var(--ink); }
h3 { color: var(--ink); font: 26px/2.2 "Poppins-ExtraLight", sans-serif; letter-spacing: 4px; }
section[id] { scroll-margin-top: var(--header-offset); }
.textCont h2, .textCont h3 { word-break: normal; overflow-wrap: normal; }
.textCont h2 { text-wrap: balance; }

a { transition: opacity .4s cubic-bezier(.455,.03,.515,.955), color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
a, a:hover, a:active, a:focus-visible { text-decoration: none; }
a:hover, a:active, .button:hover, .button:active { opacity: 1; }
@media (any-hover: hover) and (any-pointer: fine) {
  a:hover, .button:hover { opacity: .65; }
  a:focus-visible, .button:focus-visible { opacity: 1; }
}
:focus-visible { outline: 2px solid var(--ink-strong) !important; outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 18px; background: var(--paper); color: var(--ink-strong); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

header.home, header.home.coverpage, header.home.popIn {
  box-sizing: border-box;
  z-index: 700;
  min-height: 0;
  height: auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) 10px calc(22px + env(safe-area-inset-left, 0px));
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: var(--paper);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
header.home:after { display: none; }
/* Keep links keyboard-accessible while the whole masthead rests out of view. */
/* A soft entrance and shorter exit keep the names and links moving together. */
header.home.auto-nav-ready { --nav-fade-duration: 240ms; --nav-shift-duration: 280ms; visibility: visible; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--nav-fade-duration) cubic-bezier(.4,0,.6,1), transform var(--nav-shift-duration) cubic-bezier(.4,0,.6,1); }
header.home.auto-nav-ready.menu-open, header.home:focus-within { --nav-fade-duration: 320ms; --nav-shift-duration: 380ms; opacity: 1; pointer-events: auto; transform: none; transition-duration: var(--nav-fade-duration), var(--nav-shift-duration); transition-timing-function: cubic-bezier(.22,1,.36,1); }
/* Home blocks interaction immediately while the existing fade finishes. */
header.home.auto-nav-ready.nav-on-home { opacity: 0; pointer-events: none; transform: translateY(-4px); }
/* Balance the final tracking space so the visible lettering sits on the center axis. */
header.home h1.monogram { --name-spacing: 6px; opacity: 1; font: 20px/1.2 "Poppins-Regular", sans-serif; letter-spacing: var(--name-spacing); margin: 0; white-space: nowrap; }
.header-identity { display: flex; align-items: center; max-width: 100%; }
.header-identity { margin-bottom: 1px; }
header.home .masthead-name { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0 0 var(--name-spacing); color: var(--ink); font: inherit; letter-spacing: inherit; white-space: nowrap; }
.section-nav { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0 14px; line-height: 1.5; }
.section-nav a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 9px 0 10.4px; font: 12px/1.4 "Poppins-Regular", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); border: 0; white-space: nowrap; }
.section-nav a:hover, .section-nav a[aria-current="location"] { color: var(--ink-strong); }
.section-nav a[aria-current="location"] { font-family: "Poppins-Medium", sans-serif; }
/* A heading is a reading destination after navigation, not an outlined control. */
.navigation-target:focus { outline: none !important; }

main section.home.coverpage { height: 100svh; overflow: hidden; }
main section.home.coverpage h1.logo { --hero-name-spacing: 22px; line-height: 1em; left: calc(var(--hero-name-spacing) / 2); }
.hero-name-group { display: inline-block; white-space: nowrap; }
.hero-caption { position: absolute; bottom: 36px; left: 24px; right: 24px; z-index: 10; color: #fff; text-align: center; }
.hero-caption p { color: #fff; font-size: 13px; line-height: 1.6; letter-spacing: .14em; text-shadow: 0 1px 12px rgba(30, 20, 15, .7); }
.hero-caption span { padding-inline: .35em; }
.hero-section-links { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hero-section-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 6px; color: #fff; font: 12px/1.5 "Poppins-ExtraLight", sans-serif; letter-spacing: .06em; text-shadow: 0 1px 10px rgba(30, 20, 15, .8); }
.hero-section-links > span { padding: 0; color: rgba(255,255,255,.75); font-size: 12px; }
.hero-section-links a:focus-visible { outline-color: #fff !important; outline-offset: 0; }
main section.home.coverpage:after { content: ""; position: absolute; inset: 60% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(40, 28, 20, .42)); z-index: 1; }

#head_10, #head_20, #head_30, #head_40, #head_60, #head_70 { font-size: 16px !important; }
#head_10 h2, #head_20 h2, #head_30 h2, #head_40 h2, #head_60 h2, #head_70 h2 { box-sizing: border-box; max-width: none; font: var(--section-title-size)/1.5 "Poppins-Regular", sans-serif !important; letter-spacing: var(--section-title-spacing); padding-inline-start: var(--section-title-spacing); }
main .textCont h3 { box-sizing: border-box; padding-inline-start: 4px; }
#head_10 :is(h2, h3, h4, p), #head_40 :is(h2, h3, h4, p), #head_61 :is(h3, h4), #head_62 :is(h3, h4), #head_63 :is(h3, h4), #head_64 :is(h3, h4), #head_65 :is(h3, h4), #head_66 :is(h3, h4) { color: var(--ink) !important; }
#head_10 h2 { margin-bottom: 28px; }
#head_10 .subsection { max-width: 650px; }
#head_10 h3 { margin-bottom: 12px; }
#head_10 h4 { margin-bottom: 4px; }
#head_10 p { margin-bottom: 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-strong); border-bottom: 0; letter-spacing: 1px; }
.text-link span { margin-left: 9px; }

#head_20 { z-index: 2; }
#head_20 :is(h2,h3,h4,p) { color: var(--paper) !important; }
#head_30, #head_60 { --ink: var(--panel-ink); --ink-strong: var(--panel-ink); }
#head_30 .iconImage { display: none; }
#head_30 :is(h2,h3,h4,p) { color: var(--ink-strong) !important; }
#head_30 h2 { margin-bottom: 26px; }
#head_30 h3 { margin-bottom: 14px; }
#head_30 .buttonCont { margin-top: 18px; }
#head_60 h2 { color: var(--ink-strong) !important; }

.button { min-height: 46px; font: 17px/1 "Poppins-ExtraLight", sans-serif; letter-spacing: 2px; padding: 0; }
.button span { min-height: 46px; padding: 11px 25px; line-height: 24px; background: var(--ink-strong); color: var(--paper); border: 1px solid var(--ink-strong); }
.button:hover span { background: var(--ink); border-color: var(--ink); }
.imgCont .textCont .button.outline span { border-color: var(--ink-strong) !important; color: var(--ink-strong) !important; background: transparent; }
.imgCont .textCont .button.outline:hover span { background: var(--ink-strong); color: var(--paper) !important; }
#head_30 .button.outline span, #head_30 .button.outline:hover span { background: var(--taupe); border-color: var(--paper) !important; color: var(--paper) !important; }
#head_40 .button { margin-top: 22px; }

.countdown .column .wrapper .time { color: var(--ink) !important; }
.countdown .column .wrapper .label { color: var(--ink) !important; font-family: "Poppins-Thin", sans-serif; font-size: 13px; letter-spacing: 1px; }
#head_12 h3:empty { display: none; }

#questions .textCont.textOnly { max-width: 820px; padding-block: 40px; }
#questions .textCont.textOnly h3 { font: 26px/2.2 "Poppins-ExtraLight", sans-serif; letter-spacing: 4px; margin-bottom: 14px; }
#questions .textCont.textOnly h4 { max-width: 660px; margin-inline: auto; }
#questions .textCont.textOnly .subsection { margin-bottom: 0; }
#questions .section.large > .sectionCont + .sectionCont::before { width: min(100%, 820px); height: .5px; left: 0; right: 0; margin-inline: auto; background: var(--rule); }
#head_70 h2 { color: var(--paper) !important; }
.p798759 .imgCont { background: var(--paper); }
main section.rsvp.p798760 { background: var(--paper); min-height: 0; }
main section.rsvp.p798760 > .mediaCont, #rsvp2798760[hidden] { display: none !important; }
.rsvp-notice { box-sizing: border-box; width: min(100%, 760px); margin: 0 auto; padding: 100px 30px; }
.rsvp-notice h2 { margin: 16px 0 24px; text-transform: uppercase; }
.rsvp-notice p { margin-bottom: 8px; }
.rsvp-notice .text-link { margin-top: 24px; }
.eyebrow { font: 12px/1.6 "Poppins-ExtraLight", sans-serif; letter-spacing: .2em; text-transform: uppercase; }

.field-label { display: block; margin: 22px 0 8px; color: var(--ink-strong); font: 13px/1.6 "Poppins-Thin", sans-serif; letter-spacing: 1px; text-align: left; }
.mainContent.password h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: .12em; max-width: 760px; }
.mainContent.password form { margin-top: 24px; }
.mainContent.password input { color: var(--ink-strong); font: 16px/48px "Poppins-Thin", sans-serif; min-height: 48px; border-bottom-color: var(--ink); }
.mainContent.password input::placeholder { color: var(--ink); opacity: 1; }
.mainContent.password .button { margin-top: 24px; }
.error { color: #9c3530 !important; font-family: "Poppins-Thin", sans-serif; }
.message-page { min-height: 100svh; display: grid; place-items: center; padding: 30px; box-sizing: border-box; text-align: center; }
.message-panel { max-width: 620px; }
.message-panel h1 { font: clamp(32px, 5vw, 52px)/1.3 "Poppins-Regular", sans-serif; margin: 18px 0; }
.message-panel .button { margin-top: 24px; }

@media (min-width: 769px) {
  #details .section.large:first-child .imgCont, #head_10 { min-height: 540px !important; }
  #head_12, #details .section.full:last-child .imgCont { min-height: 430px !important; }
  #travel .sectionCont:first-child .imgCont, #head_30 { min-height: 580px !important; }
}

@media (max-width: 768px) {
  :root { --header-offset: 78px; --section-title-size: clamp(22px, 6.65vw, 36px); --section-title-spacing: clamp(4px, 1.35vw, 8px); }
  main section.home.coverpage { padding-inline: 20px; }
  main section.home.coverpage h1.logo { --hero-name-spacing: clamp(14px, 4.5vw, 22px); }
  .hero-caption { bottom: 28px; }
  .hero-caption p { font-size: 11px; letter-spacing: .07em; }
  .hero-section-links a { font-size: 11px; padding-inline: 4px; }
  h3 { font-size: 20px; line-height: 1.8; letter-spacing: 3px; }
  main .textCont h3 { padding-inline-start: 3px; }
  #head_10, #head_20, #head_30, #head_40, #head_60, #head_70 { padding: 64px 24px; }
  #head_10 h2, #head_20 h2, #head_30 h2, #head_40 h2, #head_60 h2, #head_70 h2 { width: calc(100% + 16px); margin-inline: -8px; }
  #details .section.large { padding: 0; }
  #details .section.large:first-child .imgCont, #head_10 { min-height: 480px !important; }
  #details .section.full:last-child .imgCont, #head_12 { min-height: 280px !important; }
  #details .section.full .sectionCont .imgCont.venue-photo {
    min-height: 0 !important;
    height: auto;
    aspect-ratio: 8 / 3;
  }
  #details .venue-photo .bgBox { background-size: contain !important; background-repeat: no-repeat; transform: none !important; }
  #details .venue-photo #head_11 { display: none; }
  #head_12 { padding: 50px 20px; }
  #head_12 h3 { display: none; }
  .p801008 .imgCont, #head_20 { min-height: 460px !important; }
  #travel .sectionCont:first-child .imgCont, #head_30 { min-height: 490px !important; }
  #registry .sectionCont .imgCont, #head_40 { min-height: 410px !important; }
  #questions .section:first-child .imgCont, #head_60 { min-height: 220px !important; }
  #questions .textCont.textOnly { padding: 28px 24px; }
  #questions .textCont.textOnly h3 { font-size: 20px; line-height: 1.8; letter-spacing: 3px; }
  #head_70, .p798759 .imgCont { min-height: 280px !important; }
  .rsvp-notice { padding: 64px 24px; }
  .rsvp-notice h2 { font-size: 26px; letter-spacing: .14em; }
  .mainContent.password .group { padding: 28px; }
  .mainContent.password h2 { font-size: 30px; letter-spacing: .1em; line-height: 1.5; }
}
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  header.home, header.home.coverpage, header.home.popIn { padding: calc(8px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 9px calc(14px + env(safe-area-inset-left, 0px)); }
  header.home h1.monogram { --name-spacing: 4px; font-size: 17px; }
  .section-nav { width: 100%; max-width: 440px; gap: 0; }
  .section-nav a { flex: 1 1 0; font-size: 11.5px; letter-spacing: .5px; padding: 0 1px 0 1.5px; }
}
@media (max-width: 359px) {
  header.home h1.monogram { --name-spacing: 3px; font-size: 15px; }
  .section-nav a { font-size: 10.5px; letter-spacing: .25px; }
}

@media (max-width: 360px) {
  :root { --section-title-spacing: 4px; }
  #head_10, #head_20, #head_30, #head_40, #head_60, #head_70 { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* Keep the header stationary; a brief opacity fade avoids an abrupt cut. */
  header.home.auto-nav-ready { transform: none !important; transition-property: opacity !important; transition-duration: var(--nav-fade-duration) !important; }
}
