:root {
  --ink: #171923;
  --plum: #2b252d;
  --pearl: #f6f2ec;
  --champagne: #c9a66b;
  --blue-grey: #aab4c4;
  --body: #24242a;
  --secondary: #5d5a60;
  --card: rgba(246, 242, 236, 0.94);
  --border: rgba(201, 166, 107, 0.72);
  --shadow: 0 18px 45px rgba(12, 10, 16, 0.28);
}

body, input, select, textarea { color: var(--body); font-family: "Source Sans Pro", Arial, sans-serif !important; }
h1, h2, h3, h4, h5, h6, .date { color: var(--ink); font-family: Georgia, "Times New Roman", serif !important; }
p { font-family: "Source Sans Pro", Arial, sans-serif !important; }
a { border-bottom-color: var(--champagne); }
a:hover { color: var(--plum); }
a:focus-visible, button:focus-visible, .button:focus-visible { outline: 3px solid var(--champagne); outline-offset: 3px; }

#header { background-image: radial-gradient(rgba(23, 25, 35, 0.72) 20%, rgba(23, 25, 35, 0.08) 68%); }
#header > *:before, #header nav.use-middle:after { background: var(--champagne); }
#header .logo, #header .content, #header nav ul, #header nav ul li { border-color: var(--border); }
#header .logo { background: rgba(246, 242, 236, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
#header .content .inner { background: rgba(246, 242, 236, 0.9); border-radius: 3px; padding: 1.5rem 2rem; }
#header .content p { color: var(--body); letter-spacing: 0.04rem; line-height: 1.7; text-transform: none; font-size: 0.95rem; }
#header nav ul { background: rgba(23, 25, 35, 0.78); backdrop-filter: blur(8px); }
#header nav ul li a { color: var(--pearl); min-height: 2.75rem; }
#header nav ul li a:hover, #header nav ul li a:focus { background: rgba(201, 166, 107, 0.24); }
.date { display: inline-block; color: var(--plum); font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: 0.03em; margin-top: 0.45rem; }

#main { width: 100%; min-width: 0; }
#main article { min-width: 0; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
#main article h2.major { color: var(--ink); border-bottom-color: var(--border); }
.relative-wrapper .major { background: rgba(246, 242, 236, 0.94); color: var(--ink); border-bottom: 1px solid var(--border); }
#info .relative-wrapper { height: clamp(15rem, 38vw, 22rem); }
#info .image.main img { height: clamp(15rem, 38vw, 22rem); object-fit: cover; object-position: center 28%; }
#helpful .relative-wrapper .image img { filter: none; object-position: center 42%; transform: none; }
#program, #contact { padding: 2.25rem; }
#program .major, #contact .major { margin-top: 0; }
#main article .close:before { background-color: var(--ink); border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 25, 35, 0.3); }
#main article .close:hover:before { background-color: var(--plum); }
.flowers-note { color: var(--plum); font-weight: 600; }
.schedule-list { display: grid; gap: 0.7rem; }
.schedule-list li { border-bottom: 1px solid rgba(201, 166, 107, 0.4); padding: 0 0 0.7rem; }
.schedule-list time { color: var(--plum); display: inline-block; font-family: Georgia, "Times New Roman", serif; font-weight: bold; min-width: 4.2rem; }
.rsvp-deadline { color: var(--secondary); font-size: 0.85rem; margin-top: 1.5rem; }

.button, input[type="submit"], input[type="reset"], input[type="button"], button { border-color: var(--champagne); box-shadow: inset 0 0 0 1px var(--champagne); color: var(--ink) !important; min-height: 2.75rem; }
.button.primary, input[type="submit"].primary, button.primary { background-color: var(--champagne); color: var(--ink) !important; }
.button:hover, button:hover { background-color: rgba(201, 166, 107, 0.2); }

#bg:before { background-image: linear-gradient(to bottom, rgba(23, 25, 35, 0.76), rgba(43, 37, 45, 0.84)); background-size: cover; background-repeat: no-repeat; }
#bg:after { background-image: url("../../images/mone-wedding-maison.jpg"); background-position: center top; }
body.is-preload #bg:before { background-color: var(--ink); }

@media (max-width: 736px) {
  #header .content .inner { padding: 1.25rem 1rem; }
  #header .content p { font-size: 0.9rem; }
  #info .relative-wrapper { height: 13rem; }
  #info .image.main img { height: 13rem; object-position: center 24%; }
  #program, #contact { padding: 1.5rem 1.25rem; }
  #bg:before { background-image: linear-gradient(to bottom, rgba(23, 25, 35, 0.88), rgba(43, 37, 45, 0.92)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}