/* Removable Lora/layout trial. Scoped below the cover; no animation transforms. */
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora/Lora[wght].ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
#siteFrame main > :not(#home) {
  --serif: 'Lora', Georgia, serif;
  --sans: var(--serif);
  --section-size: 24px;
  --body-size: 16px;
  --small-size: 13px;
  font-family: var(--serif);
}
#guestGreeting.invitation__address {
  font-size: clamp(36px, 12vw, 48px) !important;
  line-height: 1.3;
  margin-bottom: 24px;
}
#guestGreeting .invitation__address-names { word-break: normal; overflow-wrap: normal; text-wrap: balance; }
#invitation .section-inner { max-width: 584px; padding: 32px 28px; }
#invitation .body-copy { max-width: 520px; margin-inline: auto; line-height: 1.65; }
#siteFrame .swallow-transition {
  width: min(calc(100% - 56px), 520px);
  margin: 12px auto 24px;
  pointer-events: none;
}
#siteFrame .swallow-transition img {
  display: block;
  height: auto;
  max-width: 100%;
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
#siteFrame .swallow-transition--single img {
  width: clamp(82px, 12vw, 104px);
  margin-left: auto;
  margin-right: 12%;
  transform: rotate(-8deg);
}
#siteFrame .swallow-transition--meadow { margin-top: 0; margin-bottom: 12px; }
#siteFrame .swallow-transition--meadow img {
  width: clamp(144px, 23vw, 180px);
  margin-left: 8%;
}
#invitation .invitation__body-name {
  display: inline-block;
  font-family: var(--script);
  font-size: clamp(50px, 2.8vw, 26px);
  font-weight: 400;
  line-height: 1.2;
}
.yurt-interlude__text h2 { font: 500 var(--section-size)/1.45 var(--serif); }
.yurt-interlude__art { display: block; grid-area: 1 / 1 / 2 / 3; min-width: 0; }
@media (max-width: 680px) {
  .yurt-interlude { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .yurt-interlude__art { grid-area: 1 / 1; }
  .yurt-interlude__text {
    grid-area: 1 / 1;
    align-self: start;
    width: 100%;
    padding: 32px 28px 0;
  }
  .yurt-interlude__image {
    mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 96%, transparent);
  }
}
#date, #venue > .section-inner {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#date::before, #date::after,
#venue > .section-inner::before, #venue > .section-inner::after,
#rsvp .rsvp__card::before, #rsvp .rsvp__card::after { content: none; }
#date, #venue, #rsvp { margin-top: 72px; }
.yurt-interlude { margin-block: 64px; }
#date > .section-inner { padding: 24px 18px; }
#date .calendar { border: 0; background: transparent !important; padding: 20px 0; }
#date .calendar__grid > span { font-size: var(--body-size) !important; }
#date .calendar__heading { font-size: var(--body-size) !important; font-weight: 500 !important; }
#date .event-date-summary__date, #venue .venue__name, #rsvp h2 {
  font-size: var(--section-size) !important;
  line-height: 1.3;
  font-weight: 500 !important;
  text-wrap: balance;
}
#date .event-date-summary__weekday { font-size: var(--body-size) !important; }
#date .countdown-section {
  width: 100%;
  margin: 48px auto 0;
  padding: 12px 8px 14px;
  background: #774852;
  color: #faf6ef;
}
#date .countdown-section h2,
#date .countdown-section strong,
#date .countdown-section span { color: #faf6ef; }
#date .countdown i { background: rgb(250 246 239 / 32%); }
#date .countdown strong { font-size: var(--section-size); font-variant-numeric: tabular-nums; }
#venue > .section-inner { padding: 24px 18px; }
#venue .venue__kicker {
  font: 500 var(--section-size)/1.45 var(--serif);
  color: var(--wine);
  text-transform: none;
  letter-spacing: 0;
  text-wrap: balance;
  margin-block: 0 24px;
}
#venue .venue__address, #venue .venue__type { line-height: 1.65; }
#rsvp { padding: 0 28px; }
#rsvp .rsvp__card { padding: 24px 0; max-width: 520px; margin-inline: auto; }
#rsvp h2 { margin: 0 0 12px; }
#rsvp .rsvp__card > p:not(.kicker) { margin: 0 0 24px; line-height: 1.65 !important; }
#rsvp form { margin-top: 0; gap: 20px; }
#rsvp .rsvp__card {
  position: relative;
  max-width: 560px;
  padding: 34px clamp(22px, 5vw, 48px) 38px;
  background: #f3ebdd;
  border: 1px solid rgb(119 72 82 / 38%);
  box-shadow: 0 10px 26px rgb(73 62 57 / 8%);
}
#rsvp .rsvp__card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #774852;
}
#rsvp h2 { color: var(--wine); margin-bottom: 10px; }
#rsvp .rsvp__card > p:not(.kicker) { color: var(--muted); }
#rsvp .rsvp__choice:has(input:checked) {
  background: rgb(119 72 82 / 13%);
  border-color: #774852;
}
#rsvp .rsvp__choice input[type="radio"]:checked { border-color: #774852; }
#rsvp fieldset { margin: 0; }
#rsvp legend, #rsvp form label > span { letter-spacing: 0; text-transform: none; }
#rsvp .rsvp__choice { min-height: 52px; padding: 12px 0; }
#rsvp .rsvp__choice > span { font-size: var(--body-size) !important; line-height: 1.5; }
#rsvp .dark-button { margin: 8px 0 0; min-height: 48px; }
#rsvp .form-status { margin: 0; min-height: 0; font-size: var(--small-size); line-height: 1.6; }
/* Natural image height puts the replay link after the illustration. */
#siteFrame main > footer:has(.signature-landscape) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 0 28px;
  margin-top: 48px;
}
#siteFrame footer .signature { padding-inline: 28px; line-height: 1.65 !important; }
#siteFrame footer .footer__hosts { margin-top: 32px !important; }
#siteFrame footer .signature-landscape {
  position: relative;
  inset: auto;
  order: 1;
  margin-top: -8%;
}
#siteFrame footer #replayIntro { order: 2; margin-top: 24px; }
@media (min-width: 681px) {
  #siteFrame main > :not(#home) { --section-size: 30px; --body-size: 18px; --small-size: 14px; }
  #guestGreeting.invitation__address { font-size: 64px !important; }
  #date, #venue, #rsvp { margin-top: 96px; }
  .yurt-interlude { margin-block: 80px; }
}
@media (min-width: 1000px) {
  #date > .section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; align-items: center; }
  #date .event-date-summary { margin: 0; }
  #date .calendar { margin: 0; width: 100%; }
  #date .calendar-download { grid-column: 2; justify-self: center; margin-top: 0; }
  #venue > .section-inner { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 36px; align-items: start; }
  #venue .venue__kicker, #venue .venue__name, #venue .venue__type, #venue .venue__address { grid-column: 1; }
  #venue .venue-map { grid-column: 2; grid-row: 1 / 6; width: 100%; margin: 0; }
  #venue .soft-button { grid-column: 1; justify-self: center; }
}

/* The relatives' greeting is long; keep only the unpersonalized copy compact.
   Once a personal name is inserted, the prefix marker preserves the display scale. */
#guestGreeting:not(:has(.invitation__address-prefix)) {
  font-family: var(--serif) !important;
  font-size: clamp(18px, 1.8vw, 20px) !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  text-transform: uppercase;
  max-width: 40ch;
}

#interludeTitle {
  text-transform: uppercase;
  color: var(--ink) !important;
}
/* Shared invisible text edges on phones. Artwork, calendar and form keep
   their independent widths; only the letter's text follows these guides. */
@media (max-width: 680px) {
  #siteFrame {
    --letter-text-gutter: clamp(60px, 12vw, 65px);
    --letter-text-width: calc(100vw - 2 * var(--letter-text-gutter));
  }
  #invitation .section-inner,
  .yurt-interlude__text,
  #date .event-date-summary,
  #venue .venue__kicker,
  #venue .venue__name,
  #venue .venue__type,
  #venue .venue__address,
  #siteFrame footer .signature {
    width: var(--letter-text-width);
    max-width: none;
    padding-inline: 0;
    margin-inline: calc((100% - var(--letter-text-width)) / 2);
  }
  .yurt-interlude__text { justify-self: center; }
}