:root {
  --chocolate: #362220;
  --plum: #885E81;
  --olive: #534914;
  --wine: #48111F;
  --blue: #9DAECC;
  --rose: #FC9BC6;
  --paper: #f4ecdd;
  --ink: var(--chocolate);
  --muted: #76605b;
  --line: #36222035;
  --serif: 'Spectral', Georgia, serif;
  --script: 'Pinyon Script', cursive;
  color-scheme: light;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 32px;
  -webkit-tap-highlight-color: #885E8144;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper) url('assets/paper.svg'); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a, summary { touch-action: manipulation; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--plum); outline-offset: 6px; }
section, details { scroll-margin-top: 32px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 20px; background: var(--paper); color: var(--chocolate); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 20px 24px 17px; background: var(--paper) url('assets/paper.svg'); color: var(--chocolate); }
.monogram { font-family: var(--script); font-size: 41px; line-height: 1; min-height: 47px; display: flex; align-items: center; justify-content: center; }
.monogram span { font-size: 25px; color: var(--plum); margin: 0 4px; }
nav { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.7vw, 42px); margin-top: 8px; }
nav a { font-size: 14px; font-style: italic; min-height: 44px; display: inline-flex; align-items: center; }
nav a:hover { color: var(--wine); text-decoration: underline; text-underline-offset: 6px; }
nav .nav-rsvp { color: var(--wine); }
.menu-toggle { display: none; }
.hero { position: relative; min-height: 920px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; isolation: isolate; overflow: hidden; padding: 66px 24px 76px; background: var(--chocolate); }
.hero-art { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; z-index: -1; }
.invitation { position: relative; min-width: 0; width: min(100%, 510px); text-align: center; padding: 42px 45px 38px; background: var(--paper) url('assets/paper.svg'); color: var(--wine); box-shadow: 0 5px 26px #160a0840; isolation: isolate; }
.invitation::before { content: ''; position: absolute; inset: -3px; background: var(--paper) url('assets/paper.svg'); clip-path: polygon(0 .4%, 12% 0, 24% .3%, 41% 0, 55% .2%, 71% 0, 86% .3%, 100% 0, 99.6% 20%, 100% 39%, 99.7% 57%, 100% 76%, 99.6% 100%, 80% 99.7%, 62% 100%, 40% 99.8%, 22% 100%, 0 99.7%, .3% 77%, 0 53%, .2% 28%); z-index: -1; }
.invitation-frame { position: absolute; inset: 18px; border: 1px solid #885E8166; pointer-events: none; }
.invitation-frame::before, .invitation-frame::after { content: ''; position: absolute; width: 11px; height: 11px; background: var(--paper); border: 1px solid var(--plum); transform: rotate(45deg); left: calc(50% - 6px); }
.invitation-frame::before { top: -6px; }
.invitation-frame::after { bottom: -6px; }
.fleuron { display: block; color: var(--olive); font-family: Georgia, serif; font-size: 35px; line-height: 1; margin: 2px 0 18px; }
.invitation-opening { font-size: 13px; font-style: italic; color: var(--chocolate); margin-bottom: 22px; }
h1 { font-family: var(--script); font-size: 91px; line-height: 1.06; display: flex; flex-direction: column; align-items: center; }
h1 .person { display: flex; flex-direction: column; align-items: center; }
h1 small { font-family: var(--serif); font-size: 14px; line-height: 1.6; letter-spacing: .1em; margin-top: 0; }
h1 .ampersand { font-size: 34px; line-height: 1.2; color: var(--plum); margin: 6px 0 2px; }
.invitation-request { color: var(--chocolate); font-size: 13px; margin: 24px 0 22px; }
.invitation-date { font-size: 16px; line-height: 1.65; }
.invitation-place { font-size: 17px; line-height: 1.6; color: var(--chocolate); margin-top: 21px; }
.invitation-place span { font-size: 13px; font-style: italic; }
.invitation-link { font-size: 12px; display: inline-flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 16px; border-bottom: 1px solid #885E8170; }
.invitation-link:hover { color: var(--olive); border-bottom-color: var(--olive); }
.section-pad { padding: 110px max(7vw, env(safe-area-inset-right)) 110px max(7vw, env(safe-area-inset-left)); }
.eyebrow { font-size: 15px; line-height: 1.6; font-style: italic; }
h2 { font-family: var(--script); font-size: clamp(54px, 5.5vw, 84px); line-height: 1.2; color: var(--wine); }
.welcome { text-align: center; max-width: none; margin: 0; padding-top: 100px; padding-bottom: 110px; background: linear-gradient(#FC9BC618, #f4ecdd45), url('assets/quiet-meadow.webp') center / cover; }
.flourish { font-family: Georgia, serif; font-size: 32px; color: var(--plum); margin-bottom: 22px; }
.welcome .eyebrow { color: var(--muted); margin-bottom: 17px; }
.welcome-copy { font-size: 17px; line-height: 1.95; max-width: 640px; margin: 28px auto 0; }
.signature { font: 35px/1.5 var(--script); color: var(--plum); margin-top: 30px; }
.countdown { width: min(100%, 460px); margin: 38px auto 0; color: var(--olive); }
.countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.countdown-units[hidden] { display: none; }
.countdown-unit { display: flex; flex-direction: column; gap: 8px; }
.countdown-unit + .countdown-unit { border-left: 1px solid currentColor; border-color: #f4ecdd33; }
.countdown-value { font-size: clamp(30px, 4vw, 42px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-unit-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.countdown .countdown-caption { margin-top: 22px; font-size: 13px; font-style: italic; }
.venue-section { background: linear-gradient(90deg, #fffdf318, #fffdf39c 55%, #fffdf3db), url('assets/quiet-vineyard.webp') center / cover; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7vw; align-items: center; position: relative; margin: 0; min-height: 800px; }
.venue-section::after { display: none; content: ''; pointer-events: none; position: absolute; inset: 12px; border: 1px solid #36222040; }
.venue-copy { grid-column: 2; padding: 42px; background: transparent; box-shadow: none; }
.venue-copy .eyebrow { margin-bottom: 12px; color: var(--chocolate); }
.venue-copy h2 { font-size: clamp(58px, 5.5vw, 82px); }
.venue-intro { margin-top: 20px; font-size: 16px; line-height: 1.8; max-width: 430px; }
.event-details { margin: 28px 0 0; }
.event-details > div { margin-top: 22px; }
dt { font-size: 13px; font-style: italic; color: var(--wine); margin-bottom: 4px; }
dd { font-size: 20px; margin: 0; }
dd span, address { display: block; font-size: 14px; line-height: 1.7; font-style: normal; margin-top: 3px; }
.venue-actions { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; border-bottom: 1px solid currentColor; font-size: 13px; font-style: italic; padding: 7px 0; }
.text-link:hover { color: var(--wine); }
.calendar-note { font-size: 12px; line-height: 1.6; margin-top: 15px; }
.travel-section { text-align: center; max-width: none; margin: 0; color: var(--chocolate); background: linear-gradient(#9DAECC40, #9DAECC80), url('assets/quiet-coast.webp') center / cover; }
.travel-title .eyebrow { color: var(--wine); margin-bottom: 12px; }
.travel-info { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 58px; margin-top: 54px; }
.travel-info article { position: relative; }
.travel-fleuron { display: block; font-size: 30px; font-family: Georgia,serif; color: var(--olive); margin-bottom: 16px; }
h3 { font-size: 23px; font-style: italic; line-height: 1.3; margin-bottom: 18px; color: var(--wine); }
.travel-info p { font-size: 15px; line-height: 1.85; }
.travel-info .text-link { margin-top: 18px; }
.status-label { display: inline-block; font-size: 13px; font-style: italic; color: var(--muted); margin-top: 19px; }
.faq-section { max-width: none; margin: 0; padding-top: 100px; background: linear-gradient(#FC9BC626, #f4ecdd88), url('assets/quiet-pond.webp') center / cover; }
.faq-section > div:first-child { text-align: center; }
.faq-section .eyebrow { margin-bottom: 12px; color: var(--muted); }
.faq-intro { font-size: 15px; line-height: 1.8; margin-top: 20px; }
.faq-list { max-width: 700px; margin: 38px auto 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 78px; padding: 20px 4px; font-size: 16px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--wine); }
.plus { display: inline-flex; width: 15px; height: 15px; position: relative; flex-shrink: 0; color: var(--plum); }
.plus::before, .plus::after { content: ''; position: absolute; width: 13px; height: 1px; background: currentColor; left: 1px; top: 7px; }
.plus::after { transform: rotate(90deg); transition: transform .2s; }
details[open] .plus::after { transform: rotate(0); }
.faq-answer { padding: 0 38px 24px 4px; font-size: 15px; line-height: 1.85; color: var(--muted); }
.faq-answer .text-link { margin-top: 12px; color: var(--wine); }
.rsvp-section { position: relative; text-align: center; background: var(--wine) url('assets/paper.svg'); color: var(--paper); margin: 0; padding-top: 78px; padding-bottom: 88px; isolation: isolate; overflow: hidden; }
.rsvp-section::after { display: none; }
.rsvp-flowers { position: absolute; inset: 0; background: url('assets/quiet-twilight.webp') center / cover; opacity: .8; z-index: -1; }
.rsvp-content { position: relative; }
.rsvp-embed { width: 100%; max-width: 760px; margin: 32px auto 24px; text-align: left; }
.rsvp-embed iframe { width: 100%; max-width: 100%; height: 800px; border: 0; }
.rsvp-content .rsvp-fallback { font-size: 14px; }
.rsvp-star { font-family: Georgia,serif; font-size: 34px; color: var(--rose); display: block; margin-bottom: 24px; }
.rsvp-content .eyebrow { color: var(--rose); margin-bottom: 12px; }
.rsvp-content h2 { color: var(--paper); font-size: 90px; }
.rsvp-content > p:not(.eyebrow) { font-size: 16px; line-height: 1.9; margin-top: 20px; }
.rsvp-status { display: block; margin: 28px auto 6px; font-size: 14px; font-style: italic; color: var(--rose); }
.rsvp-content .text-link:hover { color: var(--rose); }
.rsvp-content a:focus-visible { outline-color: var(--blue); }
footer { text-align: center; background: var(--paper) url('assets/paper.svg'); padding: 64px 24px max(42px, env(safe-area-inset-bottom)); }
.footer-signature { font: 45px/1.4 var(--script); color: var(--wine); display: inline-block; }
.footer-signature:hover { color: var(--plum); }
footer p { margin-top: 13px; font-size: 12px; }
footer p span { display: inline-block; padding: 0 9px; }
footer .footer-note { font-size: 15px; font-style: italic; color: var(--plum); margin-top: 20px; }
@media (min-width: 1700px) {
  .hero { min-height: 1050px; }
  .invitation { width: 550px; padding-top: 55px; padding-bottom: 50px; }
  .venue-section { padding-left: max(8vw, calc((100vw - 1350px)/2)); padding-right: max(8vw, calc((100vw - 1350px)/2)); }
}
@media (max-width: 1050px) {
  .section-pad { padding: 80px 6vw; }
  .venue-section { gap: 48px; }
  .travel-info { gap: 28px; }
  .faq-section { padding-top: 80px; }
}
@media (max-width: 760px) {
  .site-header { padding: 16px 24px; min-height: 78px; flex-direction: row; justify-content: space-between; }
  .monogram { font-size: 36px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 15px; color: var(--chocolate); background: transparent; padding: 8px 0 8px 12px; border: 0; min-height: 44px; font-size: 14px; font-style: italic; }
  .menu-icon { display: flex; flex-direction: column; gap: 6px; width: 20px; }
  .menu-icon i { display: block; height: 1px; background: currentColor; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper) url('assets/paper.svg'); padding: 16px 28px 24px; gap: 2px; margin: 0; box-shadow: 0 10px 15px #36222012; }
  nav.is-open { display: flex; flex-direction: column; align-items: stretch; }
  nav a { padding: 10px 0; min-height: 48px; font-size: 16px; }
  .hero { min-height: 0; padding: 52px 26px 62px; }
  .hero-art { object-position: 28% center; }
  .invitation { width: 100%; max-width: 370px; padding: 35px 24px 30px; }
  .invitation-frame { inset: 12px; }
  .fleuron { font-size: 30px; margin-bottom: 16px; }
  .invitation-opening { font-size: 12px; margin-bottom: 18px; }
  h1 { font-size: 75px; }
  h1 small { font-size: 13px; }
  h1 .ampersand { font-size: 31px; }
  .invitation-request { font-size: 12px; line-height: 1.6; margin: 24px 0 18px; }
  .invitation-date { font-size: 14px; }
  .invitation-place { font-size: 16px; margin-top: 20px; }
  .invitation-place span { font-size: 12px; }
  .section-pad { padding: 70px 28px; }
  h2 { font-size: clamp(50px, 12vw, 65px); }
  .eyebrow { font-size: 14px; }
  .welcome-copy { font-size: 15px; line-height: 1.9; }
  .welcome-copy br { display: none; }
  .signature { font-size: 31px; }
  .countdown-unit-label { font-size: 9px; letter-spacing: .07em; }
  .venue-section { grid-template-columns: minmax(0,1fr); margin: 0; gap: 0; padding: 230px 26px 58px; background-position: 32% center; }
  .venue-copy { grid-column: 1; text-align: center; padding: 32px 20px; }
  .venue-copy h2 { font-size: clamp(49px, 12vw, 65px); }
  .venue-intro { font-size: 15px; margin-left: auto; margin-right: auto; }
  dd { font-size: 18px; }
  .venue-actions { gap: 24px; justify-content: center; }
  .calendar-note { font-size: 11px; }
  .travel-info { grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 32px; }
  .travel-info article { max-width: 420px; margin: 0 auto; }
  .travel-fleuron { font-size: 26px; margin-bottom: 12px; }
  .travel-info p { font-size: 15px; }
  h3 { font-size: 23px; margin-bottom: 12px; }
  .faq-section { padding-top: 70px; }
  .faq-intro { font-size: 14px; }
  summary { font-size: 15px; min-height: 76px; }
  .faq-answer { font-size: 14px; padding-right: 20px; }
  .rsvp-section { margin: 0; padding-top: 64px; padding-bottom: 68px; }
  .rsvp-content h2 { font-size: 72px; }
  .rsvp-content > p:not(.eyebrow) { font-size: 14px; }
  .footer-signature { font-size: 39px; }
  footer p { font-size: 11px; }
}
@media (max-width: 360px) {
  .hero { padding: 40px 20px 48px; }
  .invitation { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 65px; }
  .invitation-date { font-size: 13px; }
  .section-pad { padding-left: 22px; padding-right: 22px; }
  h2 { font-size: 48px; }
  .venue-copy h2 { font-size: 46px; }
  .venue-actions { gap: 18px; }
  .text-link { gap: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* Distinct, restrained landscape paintings; preserve light and blue section tones. */
@media (max-width: 760px) {
 .venue-section { padding-top: 150px; background-image: linear-gradient(#fffdf320, #fffdf3cd 30%), url('assets/quiet-vineyard.webp'); }
 .venue-copy h2 { font-size: clamp(44px, 11vw, 65px); }
 .travel-section { background-image: linear-gradient(#9DAECC70, #9DAECCa8), url('assets/quiet-coast.webp'); }
}

.travel-section .status-label { color: var(--wine); }

/* A gentle lift in pigment, retaining the supplied palette. */
.hero-art, .rsvp-flowers { filter: saturate(1.14); }
.invitation-frame { border-color: #885E8199; }
.travel-fleuron { color: var(--wine); }

/* Requested section palette and script surnames. */
.welcome { background: var(--blue); }
.welcome .eyebrow, .welcome .signature { color: var(--wine); }
.travel-section { background: var(--plum); color: #fffaf3; }
.travel-section h2, .travel-section h3, .travel-title .eyebrow,
.travel-section .status-label { color: #fffaf3; }
.travel-section .text-link:hover { color: var(--chocolate); }
.travel-section a:focus-visible { outline-color: var(--paper); }
.faq-section { background: linear-gradient(#36222055, #36222070), url('assets/quiet-twilight.webp') center / cover; color: var(--paper); }
.faq-section h2, .faq-section .eyebrow, .faq-answer,
.faq-answer .text-link, .faq-section summary:hover { color: var(--paper); }
.faq-section .plus { color: var(--rose); }
.faq-section .faq-list, .faq-section details { border-color: #f4ecdd66; }
.faq-section summary:focus-visible, .faq-section a:focus-visible { outline-color: var(--rose); }
.rsvp-section { background: var(--wine); }
h1 small { font-family: var(--script); font-size: 48px; line-height: 1.15; letter-spacing: 0; margin-top: 0; }
@media (max-width: 760px) { h1 small { font-size: 42px; } }
@media (max-width: 360px) { h1 small { font-size: 38px; } }

/* Olive stationery with a continuous ivory lace edge. */
.site-header, footer, .invitation, .invitation::before { background: var(--olive); color: var(--paper); }
.site-header .monogram span, .site-header nav a, .menu-toggle,
.footer-signature, footer .footer-note { color: var(--paper); }
.site-header nav a:hover, .footer-signature:hover { color: var(--rose); }
.invitation { width: min(100%, 1080px); padding: 70px 54px 60px; }
.invitation::before { clip-path: none; }
.invitation-opening, .invitation-request, .invitation-place, .invitation-date { color: var(--paper); }
.invitation-frame { inset: 12px; border: 0; background: url('assets/lace.svg') left top / 40px 28px repeat-x; }
.invitation-frame::before { width: 100%; height: 28px; left: 0; top: auto; bottom: 0; transform: rotate(180deg); border: 0; background: url('assets/lace.svg') left top / 40px 28px repeat-x; }
.invitation-frame::after { inset: 30px 14px; width: auto; height: auto; transform: none; border: 1px dotted #f4ecddaa; background: transparent; }
.invitation { border-left: 7px double #f4ecddbb; border-right: 7px double #f4ecddbb; }
h1 { display: block; font-size: clamp(30px, 5.1vw, 74px); line-height: 1.5; color: var(--paper); }
.names-line { display: block; white-space: nowrap; }
.name-and { font-size: .7em; }
.invitation-link { border-color: #f4ecdd99; }
.invitation-link:hover { color: var(--rose); border-color: var(--rose); }
.invitation a:focus-visible, .site-header a:focus-visible, .site-header button:focus-visible, footer a:focus-visible { outline-color: var(--rose); }
@media (min-width: 1700px) { .invitation { width: 1180px; } }
@media (max-width: 760px) {
 .hero { padding: 100px 12px; }
 .invitation { width: 100%; max-width: none; padding: 58px 10px 46px; border-left-width: 4px; border-right-width: 4px; }
 h1 { font-size: clamp(21px, 6vw, 45px); }
 .invitation-frame { inset: 7px; background-size: 32px 22px; }
 .invitation-frame::before { height: 22px; background-size: 32px 22px; }
 .invitation-frame::after { inset: 24px 0; }
 nav { background: var(--olive); }
 .invitation-opening { margin-bottom: 16px; }
}

.invitation-frame { background: url('assets/lace.svg') left top / 40px 28px repeat-x, url('assets/lace-side.svg') left top / 28px 40px repeat-y, url('assets/lace-side.svg') right top / 28px 40px repeat-y; }
.invitation { border: 0; }
@media (max-width: 760px) { .invitation-frame { background-size: 32px 22px, 14px 20px, 14px 20px; } }

/* Restore the original invitation width and exchange section colors. */
.invitation { width: min(100%, 510px); padding: 70px 40px 60px; }
h1 { font-size: 34px; }
.welcome { background: var(--wine); color: var(--paper); }
.welcome h2, .welcome .eyebrow, .welcome .signature, .welcome .countdown { color: var(--paper); }
.rsvp-section { background: var(--blue); color: var(--chocolate); }
.rsvp-content h2, .rsvp-content .eyebrow, .rsvp-status { color: var(--wine); }
.rsvp-content .text-link:hover { color: var(--wine); }
.rsvp-content a:focus-visible { outline-color: var(--wine); }
@media (min-width: 1700px) { .invitation { width: 550px; } h1 { font-size: 37px; } }
@media (max-width: 760px) {
 .hero { padding: 52px 26px 62px; }
 .invitation { width: 100%; max-width: 370px; padding: 58px 18px 46px; }
 h1 { font-size: clamp(18px, 5.6vw, 27px); }
}
@media (max-width: 360px) { .hero { padding: 40px 20px 48px; } h1 { font-size: 19px; } }

/* Photographic floral lace: uninterrupted page edges and flush card trim. */
body { position: relative; }
.page-lace { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: url('assets/floral-lace-vertical.svg') left top / 42px 126px repeat-y, url('assets/floral-lace-vertical.svg') right top / 42px 126px repeat-y; }
.lace-top, .lace-bottom { position: absolute; left: 0; right: 0; height: 42px; background: url('assets/floral-lace.webp') left top / 126px 42px repeat-x; }
.lace-top { top: 0; }
.lace-bottom { bottom: 0; }
.site-header { padding-top: 50px; }
.invitation::before { inset: 0; }
.invitation-frame { inset: 0; border: 0; background: url('assets/floral-lace.webp') left top / 132px 44px repeat-x, url('assets/floral-lace-vertical.svg') left top / 36px 108px repeat-y, url('assets/floral-lace-vertical.svg') right top / 36px 108px repeat-y; }
.invitation-frame::before { left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 44px; transform: none; background: url('assets/floral-lace.webp') left bottom / 132px 44px repeat-x; border: 0; }
.invitation-frame::after { display: none; }
footer { background: linear-gradient(#36222045, #36222065), url('assets/invitation-landscape.webp') center / cover; padding: 110px 60px 100px; min-height: 420px; }
footer .footer-signature, footer p, footer .footer-note { color: var(--paper); text-shadow: 0 1px 8px #362220; }
@media (max-width: 760px) {
 .page-lace { background-size: 17px 51px, 17px 51px; }
 .lace-top, .lace-bottom { height: 20px; background-size: 60px 20px; }
 .site-header { padding: 32px 28px 16px; }
 .invitation-frame { background-size: 84px 28px, 15px 45px, 15px 45px; }
 .invitation-frame::before { height: 28px; background-size: 84px 28px; }
 footer { padding: 85px 30px 75px; background-position: 28% center; }
}

/* Exterior lace with complementary mitred corners, never overlapping. */
.site-header { padding-top: 20px; }
.invitation-frame { --trim: 26px; inset: calc(-1 * var(--trim)); background: none; border: 0; }
.invitation-frame::before, .invitation-frame::after { display: none; }
.invitation-frame i { position: absolute; display: block; }
.card-lace-top, .card-lace-bottom { left: 0; right: 0; height: var(--trim); background: url('assets/floral-lace.webp') center / auto 100% repeat-x; }
.card-lace-top { top: 0; clip-path: polygon(0 0,100% 0,calc(100% - var(--trim)) 100%,var(--trim) 100%); }
.card-lace-bottom { bottom: 0; clip-path: polygon(var(--trim) 0,calc(100% - var(--trim)) 0,100% 100%,0 100%); }
.card-lace-left, .card-lace-right { top: 0; bottom: 0; width: var(--trim); background: url('assets/floral-lace-vertical.svg') center / 100% auto repeat-y; }
.card-lace-left { left: 0; clip-path: polygon(0 0,100% var(--trim),100% calc(100% - var(--trim)),0 100%); }
.card-lace-right { right: 0; clip-path: polygon(100% 0,100% 100%,0 calc(100% - var(--trim)),0 var(--trim)); }
@media (max-width: 760px) {
 .site-header { padding: 16px 24px; }
 .invitation-frame { --trim: 12px; }
}

/* Cut the ribbon through its center: flat sewn edge against each surface. */
.card-lace-top { background-size: auto 200%; background-position: center top; border-bottom: 1px solid #eee7d7; }
.card-lace-bottom { background-size: auto 200%; background-position: center bottom; border-top: 1px solid #eee7d7; }
.card-lace-left { background-size: 200% auto; background-position: left center; border-right: 1px solid #eee7d7; }
.card-lace-right { background-size: 200% auto; background-position: right center; border-left: 1px solid #eee7d7; }
main > section, footer { position: relative; }
.section-lace { position: absolute; left: 0; right: 0; height: 23px; pointer-events: none; z-index: 3; background-image: url('assets/floral-lace.webp'); background-size: auto 200%; background-repeat: repeat-x; }
.section-lace-top { top: 0; background-position: center bottom; border-top: 1px solid #eee7d7; }
.section-lace-bottom { bottom: 0; background-position: center top; border-bottom: 1px solid #eee7d7; }
@media (max-width: 760px) { .section-lace { height: 14px; } }

/* Two travel columns and an expandable room-block note. */
.travel-info { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.travel-info p + p { margin-top: 20px; }
.booking-details { margin-top: 22px; border: 0; }
.booking-details summary { min-height: 0; padding: 0 0 6px; width: fit-content; cursor: pointer; font-size: inherit; gap: 12px; }
.booking-details summary span { font-size: 18px; }
.booking-details[open] summary span { transform: rotate(45deg); }
.booking-details p { margin-top: 16px; }
@media (max-width: 760px) { .travel-info { grid-template-columns: 1fr; } }
.travel-section .booking-details summary { color: inherit; border-color: currentColor; margin-inline: auto; }

/* Keep the painted landscape at a constant scale as FAQ answers open. */
.faq-section { background-size: 100% 100%, auto max(1200px, 66.667vw); background-position: center, center bottom; background-repeat: no-repeat; background-color: #362220; }
.travel-info .booking-link { display: table; margin: 22px auto 0; }
.room-block-page { background: #885E81; color: #f4ecdd; }
.room-block-page .site-header { position: relative; }
.room-block-main { position: relative; min-height: calc(100svh - 90px); padding: 100px 28px; text-align: center; }
.room-block-main h1 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(60px, 8vw, 100px); margin: 20px 0 30px; }
.room-block-main h2 { font-family: 'Spectral', serif; font-size: clamp(22px, 3vw, 30px); }
.room-block-main p { max-width: 600px; margin: 20px auto; line-height: 1.85; }
.booking-placeholder { max-width: 620px; margin: 45px auto; padding: 28px 12px; border-block: 1px solid #f4ecdd66; }
.booking-placeholder h3 { font-size: 22px; }
.room-block-page .text-link { color: inherit; }
.room-block-main h1, .room-block-main h2, .room-block-main h3, .room-block-main .eyebrow { color: inherit; }

/* Guest booking guide, styled as an extension of the invitation. */
.booking-guide { padding-top: 80px; }
.booking-guide address { font-style: normal; line-height: 1.8; margin: 20px 0; }
.booking-section { max-width: 920px; margin: 65px auto; padding-top: 50px; border-top: 1px solid #f4ecdd66; }
.booking-guide .booking-section > h2 { font-family: 'Pinyon Script', cursive; font-size: clamp(44px, 6vw, 64px); font-weight: 400; }
.booking-guide .booking-note { font-size: 15px; max-width: 690px; }
.booking-call { display: inline-block; color: #f4ecdd; border: 1px solid #f4ecdd; padding: 14px 26px; margin: 8px 0; text-underline-offset: 5px; }
.booking-call:hover { background: #534914; }
.booking-guide a:focus-visible { outline: 2px solid #f4ecdd; outline-offset: 5px; }
.room-rates { width: 100%; max-width: 620px; margin: 30px auto; border-collapse: collapse; text-align: left; }
.room-rates th, .room-rates td { padding: 18px 12px; border-bottom: 1px solid #f4ecdd66; font-weight: 400; }
.room-rates thead { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.room-rates td, .room-rates th:last-child { text-align: right; }
.room-rates td { font-size: 27px; }
.stay-details { display: grid; grid-template-columns: 1fr 1fr; text-align: left; gap: 34px 54px; margin-top: 35px; }
.stay-details h3 { font-size: 23px; font-weight: 400; font-style: italic; }
.stay-details p { font-size: 16px; }
@media (max-width: 760px) { .stay-details { grid-template-columns: 1fr; gap: 24px; } .booking-section { margin-block: 45px; padding-top: 35px; } }

/* Full-width wedding-color blocks for the room-block guide. */
.room-block-colors .booking-guide { padding: 0; }
.booking-intro { padding: 80px 28px 70px; background: #885E81; color: #f4ecdd; }
.room-block-colors .booking-section { max-width: none; margin: 0; padding: 70px max(28px, calc((100% - 920px) / 2)); border: 0; }
.booking-reserve { background: #48111F; color: #f4ecdd; }
.booking-rates { background: #9DAECC; color: #362220; }
.booking-stay { background: #CDA6B4; color: #362220; }
.booking-rates .room-rates th, .booking-rates .room-rates td { border-color: #36222044; }
.room-block-colors .stay-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.booking-return { background: #362220; color: #f4ecdd; padding: 40px 28px 55px; }
@media (max-width: 760px) { .room-block-colors .booking-section { padding: 55px 28px; } .room-block-colors .stay-details { grid-template-columns: 1fr; } .booking-intro { padding: 65px 28px 55px; } }

.room-block-colors .booking-intro, .room-block-colors .booking-section, .room-block-colors .booking-return { position: relative; }

/* Registry in the wedding pink with chocolate lettering. */
.registry-page { background: #CDA6B4; color: #362220; }
.registry-page .booking-placeholder { border-color: #36222055; }
.registry-page .booking-call { color: #362220; border-color: #362220; }
.registry-page .booking-call:hover { background: #48111F; color: #f4ecdd; }
.registry-page main a:focus-visible { outline: 2px solid #362220; outline-offset: 5px; }

/* The RSVP form wears the same exterior lace as the invitation card. */
.rsvp-frame { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; position: relative; display: flow-root; background: #CDA6B4; margin-top: 58px; margin-bottom: 50px; }
.rsvp-embed iframe { display: block; }
.rsvp-frame > .invitation-frame { z-index: 1; }
@media (max-width: 760px) {
  .rsvp-frame { width: calc(100% - 24px); margin-top: 36px; margin-bottom: 36px; }
}

.rsvp-frame .rsvp-embed { margin: 0; }

/* Our open-bar hosts, revealed with the FAQ answer. */
.dog-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 8px; }
.dog-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #eee7d7; }
.dog-photos img:nth-child(1) { object-position: 30% 65%; }
.dog-photos img:nth-child(2) { object-position: 50% 55%; }
.dog-photos img:nth-child(3) { object-position: 50% 55%; }
@media (max-width: 540px) {
  .dog-photos { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; gap: 20px; }
}

/* Give the artwork breathing room on smaller screens. */
@media (max-width: 760px) {
  .hero { min-height: 650px; padding: 140px 44px 100px; }
  .hero-art { object-position: 38% center; }
  .invitation { width: 100%; max-width: 300px; padding: 34px 10px 30px; }
  .invitation h1 { font-size: clamp(17px, 5vw, 24px); }
  .invitation-opening { margin-bottom: 15px; }
  .invitation-request { margin: 18px 0 15px; font-size: 11px; }
  .invitation-place { margin-top: 15px; }
  .venue-section { background-image: linear-gradient(#36222088, #36222088), url('assets/quiet-vineyard.webp'); color: var(--paper); }
  .venue-section h2, .venue-section .eyebrow, .venue-section dt, .venue-section dd, .venue-section .text-link { color: var(--paper); }
  .venue-section .text-link { border-color: #f4ecdd88; }
}