/* ─────────────────────────────────────────────────────────────────
   invite.css: formal invitation for rebeccaandthomas.net
   Everything is scoped under #rt-invite (or .rt-*), so nothing leaks
   into Webflow's own styles. Initial hidden states for animation are
   set by JS only (html.rt-motion), never here.
   ───────────────────────────────────────────────────────────────── */

:root {
  --rt-paper: rgba(247, 243, 233, 1);
  --rt-red: #761d1d;
  --rt-ink: #1a0a0a;
  --rt-ink-soft: rgba(26, 10, 10, 0.72);
  /* Accent: luzzu blue, from Malta's painted fishing boats. Wayfinding and
     secondary detail only; red stays for the guest's name and the RSVP. */
  --rt-blue: #5b7d96;
  --rt-blue-ink: #3f6079;   /* the text shade: 6:1 on the beige */
  --rt-focus: var(--rt-blue-ink);
  --rt-rule: rgba(91, 125, 150, 0.42);   /* luzzu blue hairlines */
  --rt-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rt-sans: "Montserrat", Helvetica, Arial, sans-serif;
  --rt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rt-tex-cotton: url("https://cdn.prod.website-files.com/69a032f3f3d37a0b3745556f/69a31ae67aacd01f62852319_tx_bg_heavy-cotton.png");
  /* White paper cards with a laid texture over them at 15% */
  --rt-card: #ffffff;
  --rt-tex-laid: url("https://cdn.prod.website-files.com/69a032f3f3d37a0b3745556f/6ad3ec769d17c4e6b78fac7c_tx_laid.webp");
  --rt-tex-fibre: url("https://cdn.prod.website-files.com/69a032f3f3d37a0b3745556f/69a038bf6dc4a990a9424663_tx_card_fiber-02%20(1).png");
}

html, body {
  background: var(--rt-paper);
}

html.rt-lock,
html.rt-lock body {
  overflow: hidden;
}

#rt-invite {
  position: relative;
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
  color: var(--rt-ink);
  font-family: var(--rt-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#rt-invite *,
#rt-invite *::before,
#rt-invite *::after {
  box-sizing: border-box;
}

/* zero specificity, so every class rule below can set its own spacing */
:where(#rt-invite) :where(h1, h2, h3, h4, p, figure, ul, ol) {
  margin: 0;
  padding: 0;
}

#rt-invite ::selection {
  background: rgba(118, 29, 29, 0.18);
  color: var(--rt-ink);
}

#rt-invite .rt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#rt-invite .chalk svg {
  display: block;
}

@media (min-width: 900px) {
  #rt-invite { font-size: 18px; }
}

/* ── Intro: monogram drawn on plain paper ── */
.rt-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--rt-paper);
  transition: opacity 1000ms cubic-bezier(0.45, 0, 0.2, 1);
}
.rt-intro__mark {
  position: relative;
  width: min(54vw, 34vh, 300px);
}
/* A quiet line beneath the monogram while the site loads */
.rt-intro__note {
  margin: 36px 0 0;
  padding: 0 24px;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--rt-ink-soft);
  opacity: 0;
  animation: rt-intro-note 1.4s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rt-intro-note {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 0.8; transform: none; }
}
/* The inline source drawing is only a template for chalk-draw; never show it raw */
.rt-intro__mark > svg[data-chalk] {
  visibility: hidden;
}
.rt-intro.is-leaving {
  opacity: 0;
}
.rt-intro.is-leaving-fast {
  opacity: 0;
  transition-duration: 300ms;
}

/* ── Section 2: the invitation ── */
.rt-invitation {
  position: relative;
  padding: 88px 16px 112px;
}

@media (orientation: portrait) {
  .rt-invitation {
    padding: max(52px, calc(env(safe-area-inset-top) + 32px)) 10vw 72px;
  }
  .rt-invitation .rt-card {
    padding-left: 18px;
    padding-right: 18px;
  }
  .rt-inv__names {
    font-size: clamp(1.7rem, 7.4vw, 2.4rem);
  }
}

.rt-card {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 28px 48px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.16),
    0 14px 28px -10px rgba(26, 10, 10, 0.32),
    0 38px 70px -24px rgba(26, 10, 10, 0.5);
  isolation: isolate;
}
.rt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rt-tex-laid);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
@media (min-width: 640px) {
  .rt-card { padding: 72px 64px 64px; }
}

.rt-greet__to {
  font-family: var(--rt-serif);
  font-size: 1.05em;
  color: var(--rt-ink-soft);
  line-height: 1;
}
.rt-greet__name {
  margin-top: 10px;
  min-height: 1.15em;
  font-family: var(--rt-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--rt-red);
  text-wrap: balance;
}
.rt-greet__name--anon {
  font-style: normal;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem);
  color: var(--rt-ink-soft);
}
.rt-greet__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 22px auto 0;
  background: rgba(118, 29, 29, 0.45);
}

.rt-church {
  width: min(62%, 250px);
  margin: 40px auto 36px;
}

.rt-inv__lead {
  text-wrap: balance;
  font-size: max(0.72em, 12.5px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rt-ink-soft);
}
.rt-inv__names {
  margin-top: 28px;
  font-family: var(--rt-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--rt-ink);
}
.rt-inv__name {
  display: block;
}
.rt-inv__amp {
  display: block;
  margin: 6px 0;
  font-style: italic;
  font-size: 0.7em;
  color: var(--rt-red);
}
.rt-inv__ask {
  margin-top: 26px;
  text-wrap: balance;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 1.15em;
  color: var(--rt-ink-soft);
}

.rt-details {
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(26, 10, 10, 0.14);
}
.rt-detail {
  padding: 18px 8px;
  border-bottom: 1px solid rgba(26, 10, 10, 0.14);
}
.rt-detail dt {
  font-size: max(0.68em, 12px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rt-red);
}
.rt-detail dd {
  margin: 6px 0 0;
  font-family: var(--rt-serif);
  font-size: 1.1em;
  line-height: 1.35;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .rt-details {
    grid-template-columns: 1fr 1fr;
  }
  .rt-detail {
    padding: 22px 16px;
  }
  .rt-detail:nth-child(odd) {
    border-right: 1px solid rgba(26, 10, 10, 0.14);
  }
}

.rt-nowrap {
  white-space: nowrap;
}

/* SplitText line masks: keep descenders and italics from being clipped */
#rt-invite .rt-line {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* ── Section headings (Order of events, The details, ...) ── */
.rt-heading {
  font-family: var(--rt-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-ink);
}

/* ── Section 3: order of events ── */
.rt-events {
  position: relative;
  padding: 96px 16px 112px;
}
.rt-events__inner {
  position: relative;
  z-index: 1;
}
.rt-events__track {
  display: grid;
  gap: 28px;
  max-width: 460px;
  margin: 48px auto 0;
}
@media (min-width: 1024px) and (orientation: landscape) {
  .rt-events__track {
    max-width: 980px;
    grid-template-columns: 1fr 1fr;
  }
}

.rt-chapter {
  position: relative;
  padding: 36px 30px 34px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.14),
    0 12px 24px -10px rgba(26, 10, 10, 0.26),
    0 30px 56px -24px rgba(26, 10, 10, 0.4);
  text-align: center;
  isolation: isolate;
}
.rt-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rt-tex-laid);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
.rt-chapter__art {
  display: flex;
  justify-content: center;
  height: 112px;
  margin-bottom: 22px;
}
.rt-chapter__art .chalk {
  height: 100%;
  width: auto;
}
.rt-chapter__heading {
  margin: 0;
  font-weight: 400;
}
.rt-chapter__part {
  display: block;
  font-size: max(0.68em, 12px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rt-blue-ink);
}
.rt-chapter__title {
  display: block;
  margin: 10px 0 0;
  font-family: var(--rt-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  line-height: 1.15;
}
.rt-chapter__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--rt-ink-soft);
}
.rt-chapter__text {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rt-rule);
  font-size: 0.94em;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Horizontal chapters (wide screens, motion on): the section is pinned and
   the cards slide in from the right, one at a time */
.rt-events--h {
  height: 100vh;
  height: 100svh;
  padding: 0;
  /* clip the sliding track sideways only, so border drawings can float
     across into the next section */
  overflow-x: clip;
  overflow-y: visible;
}
.rt-events--h .rt-events__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7vh 0 6vh;
}
.rt-events--h .rt-events__track {
  display: flex;
  align-items: stretch;   /* every card as tall as the tallest */
  gap: 48px;
  max-width: none;
  width: max-content;
  margin: 5vh 0 0;
  /* start with the first card just showing at the right; end with the last in view */
  padding: 0 8vw 0 88vw;
}
.rt-events--h .rt-chapter {
  flex: none;
  width: clamp(340px, 30vw, 420px);
}
@media (orientation: portrait) {
  .rt-events--h .rt-events__inner {
    padding: 5vh 0 4vh;
  }
  .rt-events--h .rt-events__track {
    gap: 22px;
    margin-top: 3vh;
    padding: 0 12vw 0 86vw;
  }
  .rt-events--h .rt-chapter {
    width: 76vw;
    max-width: 340px;
    padding: 26px 22px 24px;
  }
  .rt-events--h .rt-chapter__art {
    height: 84px;
    margin-bottom: 14px;
  }
  .rt-events--h .rt-chapter__text {
    font-size: 0.88em;
    line-height: 1.6;
    margin-top: 14px;
    padding-top: 14px;
  }
}
/* The cards can also be swiped or dragged sideways (initEventsDrag); vertical
   swipes stay with the browser. The grab cursor is with the other cursors. */
.rt-events--h { touch-action: pan-y; }
.rt-events--h.is-dragging { user-select: none; -webkit-user-select: none; }

/* Short landscape screens (tablets with browser bars): a more compact card,
   a little wider so the text wraps into fewer lines */
@media (orientation: landscape) and (max-height: 799px) {
  .rt-events--h .rt-events__inner { padding: 3vh 0 2vh; }
  .rt-events--h .rt-events__track { margin-top: 2vh; }
  .rt-events--h .rt-chapter {
    width: clamp(340px, 36vw, 440px);
    padding: 22px 26px 20px;
  }
  .rt-events--h .rt-chapter__art {
    height: 72px;
    margin-bottom: 10px;
  }
  .rt-events--h .rt-chapter__title { font-size: 1.6rem; }
  .rt-events--h .rt-chapter__when { margin-top: 8px; }
  .rt-events--h .rt-chapter__text {
    font-size: 0.86em;
    line-height: 1.55;
    margin-top: 12px;
    padding-top: 12px;
  }
}
@media (orientation: portrait) {
  .rt-events:not(.rt-events--h) {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

/* ── Section 4: the details (accordion) ── */
.rt-faq-sec {
  position: relative;
  padding: 104px 16px 112px;
}
@media (orientation: portrait) {
  .rt-faq-sec {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}
/* Drawings are placed against the closed height, so they stay put while
   panels open and the section grows */
.rt-faq-sec > .rt-border {
  bottom: auto;
  height: 600px;
}
.rt-rsvp > .rt-border {
  bottom: auto;
  height: 650px;
}
.rt-notes > .rt-border {
  bottom: auto;
  height: 700px;
}
.rt-faq {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.rt-faq__list {
  margin-top: 44px;
  padding: 8px 32px 12px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.14),
    0 12px 24px -10px rgba(26, 10, 10, 0.26),
    0 30px 56px -24px rgba(26, 10, 10, 0.4);
  text-align: left;
  isolation: isolate;
  position: relative;
}
.rt-faq__list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rt-tex-laid);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
@media (max-width: 480px) {
  .rt-faq__list { padding: 4px 18px; }
}
.rt-faq__item + .rt-faq__item {
  border-top: 1px solid var(--rt-rule);
}
.rt-faq__q {
  margin: 0;
  font: inherit;
}
.rt-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 20px 0;
  border: 0;
  background: none;
  color: var(--rt-ink);
  font-family: var(--rt-sans);
  font-size: max(0.8em, 14px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease;
}
.rt-faq__btn:focus-visible {
  outline: 2px solid var(--rt-focus);
  outline-offset: 2px;
}
/* press feedback on the small icon, not the whole row */
.rt-faq__btn:active .rt-faq__icon {
  transform: scale(0.85);
  transition-duration: 100ms;
}
@media (hover: hover) and (pointer: fine) {
  .rt-faq__btn:hover { color: var(--rt-blue-ink); }
}
.rt-faq__btn[aria-expanded="true"] {
  color: var(--rt-blue-ink);
}
/* A drawn plus that folds into a minus */
.rt-faq__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 160ms var(--rt-ease-out);
}
.rt-faq__icon::before,
.rt-faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 280ms var(--rt-ease-out);
}
.rt-faq__icon::after {
  transform: rotate(90deg);
}
.rt-faq__btn[aria-expanded="true"] .rt-faq__icon::after {
  transform: rotate(0deg);
}

/* The unfold: the panel opens its height while the text inside settles
   down from a slight fold, like a folded note being opened. Closing is
   quicker than opening. */
.rt-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--rt-ease-out);
}
.rt-faq__panel.is-open {
  grid-template-rows: 1fr;
  transition-duration: 280ms;
}
.rt-faq__clip {
  min-height: 0;
  overflow: hidden;
  perspective: 900px;
}
.rt-faq__body {
  padding: 0 0 24px;
  opacity: 0;
  transform: rotateX(-14deg) translateY(-6px);
  transform-origin: 50% 0;
  transition: opacity 160ms ease, transform 220ms var(--rt-ease-out);
}
.rt-faq__panel.is-open .rt-faq__body {
  opacity: 1;
  transform: none;
  transition: opacity 200ms 40ms ease, transform 280ms var(--rt-ease-out);
}
.rt-faq__body p {
  font-size: 0.95em;
  line-height: 1.75;
  color: var(--rt-ink);
  max-width: 62ch;
}
.rt-faq__body p + p {
  margin-top: 0.9em;
}
/* Contact line under the card */
@media (prefers-reduced-motion: reduce) {
  /* gentler, not none: the text still fades in */
  .rt-faq__panel,
  .rt-faq__icon,
  .rt-faq__icon::before,
  .rt-faq__icon::after { transition: none; }
  .rt-faq__body,
  .rt-faq__panel.is-open .rt-faq__body { transform: none; transition: opacity 150ms ease; }
}

/* ── Shared paper card + buttons for sections 5-7 ── */
.rt-paper {
  position: relative;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.14),
    0 12px 24px -10px rgba(26, 10, 10, 0.26),
    0 30px 56px -24px rgba(26, 10, 10, 0.4);
  isolation: isolate;
}
#rt-invite .button {
  --btn: var(--rt-blue-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 46px;
  margin: 6px;
  padding: 10px 26px;
  border: 1px solid var(--btn);
  border-radius: 999px;
  background: transparent;
  color: var(--btn);
  font-family: var(--rt-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--rt-ease-out);
}
#rt-invite .button:active { transform: scale(0.97); }
#rt-invite .button:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 3px; }
#rt-invite .button.fill { background: var(--rt-red); border-color: var(--rt-red); color: var(--rt-paper); }
@media (hover: hover) and (pointer: fine) {
  #rt-invite .button:hover { background: var(--btn); color: var(--rt-paper); }
  #rt-invite .button.fill:hover { background: #5a1515; border-color: #5a1515; }
}
#rt-invite .button.disabled { opacity: 0.7; pointer-events: none; cursor: progress; }

/* ── Section 5: RSVP ── */
.rt-rsvp {
  position: relative;
  padding: 104px 16px 112px;
}
.rt-rsvp__card {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 28px 52px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.16),
    0 14px 28px -10px rgba(26, 10, 10, 0.32),
    0 38px 70px -24px rgba(26, 10, 10, 0.5);
  isolation: isolate;
}
.rt-rsvp__card::before,
.rt-notes .commentForm::before,
.rt-note::before,
.rt-guide__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rt-tex-laid);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
/* "We have you down as..." for a guest who has already replied */
.rt-rsvp__prior {
  max-width: 34ch;
  margin: 18px auto 0;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 1.02em;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}
.rt-rsvp__card .rt-rsvp__prior { color: var(--ink); }
.rt-rsvp__by {
  margin-top: 14px;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 1.1em;
  color: var(--rt-ink-soft);
}
.rsvpForm {
  margin-top: 34px;
}
.rt-rsvp__choice {
  margin: 0;
  padding: 0;
  border: 0;
}
/* The radios stay focusable (visually hidden); their labels are the buttons */
.rsvpForm .attend {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.rsvpForm .attend:checked + label {
  background: var(--rt-ink);
  border-color: var(--rt-ink);
  color: var(--rt-paper);
}
.rsvpForm .attend:focus-visible + label {
  outline: 2px solid var(--rt-focus);
  outline-offset: 3px;
}
/* Revealed by the existing jQuery slideDown once an answer is chosen
   (the #rt-invite prefix outranks the general .button display) */
#rt-invite .rsvpForm .addTotal,
#rt-invite .rsvpForm .button[type="submit"] {
  display: none;
}
.rsvpForm .addTotal {
  margin-top: 28px;
}
/* "(invited guests only)" beneath "Total attending", in the same style */
.rt-rsvp__sub {
  display: block;
  margin-top: 4px;
}
/* What's wrong with the phone number, just beneath it */
.rt-rsvp__error {
  max-width: 460px;
  margin: -16px auto 24px;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.rt-rsvp__card .rt-rsvp__error { color: var(--ink); }
.rsvpForm input[aria-invalid="true"] { border-bottom-width: 2px; }
.rsvpTotalBox h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rt-red);
}
.rsvpForm select {
  min-width: 96px;
  height: 46px;
  padding: 0 34px 0 18px;
  border: 1px solid rgba(26, 10, 10, 0.35);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a0a0a' stroke-width='1.3' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  color: var(--rt-ink);
  font-family: var(--rt-sans);
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.rsvpForm select:focus-visible,
.rsvpForm textarea:focus-visible,
.rsvpForm input[type="tel"]:focus-visible,
.commentForm textarea:focus-visible {
  outline: 2px solid var(--rt-focus);
  outline-offset: 3px;
}
.rt-rsvp__note-label,
.rt-notes__label {
  display: block;
  margin: 26px 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rt-ink-soft);
}
.rsvpForm textarea,
.rsvpForm input[type="tel"],
.commentForm textarea {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 26px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(26, 10, 10, 0.3);
  background: rgba(255, 255, 255, 0.35);
  color: var(--rt-ink);
  font-family: var(--rt-serif);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  resize: vertical;
}
.rsvpForm input[type="tel"]::placeholder,
.rsvpForm textarea::placeholder { color: rgba(26, 10, 10, 0.45); font-style: italic; }
/* The confirmation reads as a line of the letter, not a button */
#rt-invite .rsvpForm .button.success {
  border-color: transparent;
  background: transparent;
  color: var(--rt-ink);
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 1.2em;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
}
#rt-invite .addCalendarBtn {
  display: flex;
  margin: 10px auto 0;
}
.calendarOptions {
  max-width: 420px;
  margin: 14px auto 0;
  text-align: center;
}
.calGroup {
  padding: 12px 0;
  border-top: 1px solid var(--rt-rule);
}
.calGroup__title {
  margin: 0 0 6px;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 1.05em;
}
.calOption {
  display: inline-block;
  margin: 2px 8px;
  padding: 10px 4px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--rt-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#rt-invite .icsDownload {
  display: flex;
  margin: 6px auto 0;
}
.calOptions__or {
  margin: 16px 0 4px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rt-ink-soft);
}
.calOption:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 2px; }

/* The stamp, set onto the card's corner on a successful reply */
.rt-stamp {
  position: absolute;
  top: -30px;
  right: -16px;
  width: 100px;
  height: 124px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(26, 10, 10, 0.45));
  transform: rotate(7deg);
}
.rt-stamp svg { display: block; width: 100%; height: 100%; }
.rt-stamp.is-on { opacity: 1; }
/* The R&T, drawn in chalk inside the stamp's frame */
.rt-stamp__mark {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 30%;
}
.rt-stamp__mark > svg[data-chalk] { visibility: hidden; }
@media (max-width: 480px) {
  .rt-stamp { width: 80px; height: 99px; top: -24px; right: -8px; }
}

/* ── Section 7: notes wall ── */
.rt-notes {
  position: relative;
  padding: 96px 16px 120px;
}
.rt-notes .comment {
  position: relative;
  z-index: 1;
}
.rt-notes .commentForm {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 28px 40px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.14),
    0 12px 24px -10px rgba(26, 10, 10, 0.26),
    0 30px 56px -24px rgba(26, 10, 10, 0.4);
  isolation: isolate;
}
.rt-notes .commentsWrapper {
  position: relative;
  z-index: 1;
}
.rt-notes .comments .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: 420px;
  margin: 64px auto 0;
}
@media (min-width: 900px) and (orientation: landscape) {
  .rt-notes .comments .list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 36px;
    max-width: 980px;
    align-items: start;
  }
}
.rt-note {
  position: relative;
  padding: 26px 24px 20px;
  background-color: var(--rt-card);
  box-shadow:
    0 1px 2px rgba(26, 10, 10, 0.12),
    0 10px 20px -10px rgba(26, 10, 10, 0.3);
  text-align: left;
  isolation: isolate;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r));
}
/* Phones: one column, gentler tilt, never overlapping */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .rt-note { transform: translateX(calc(var(--dx) * 0.6)) rotate(calc(var(--r) * 0.5)); }
}
.rt-note__text {
  font-family: var(--rt-serif);
  font-size: 1.02em;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.rt-note__name {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Settle-in, set only by JS (initNotesSettle) */
.rt-note.is-waiting {
  opacity: 0;
  transform: translate(var(--dx), calc(var(--dy) - 26px)) rotate(calc(var(--r) + 3deg));
}
.rt-note.is-settling {
  transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ── Section 6: a little guide to Malta ── */
.rt-guide {
  position: relative;
  padding: 104px 16px 120px;
}
.rt-guide__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}
.rt-guide__intro {
  max-width: 62ch;
  margin: 28px auto 0;
  font-family: var(--rt-serif);
  font-size: 1.08em;
  line-height: 1.75;
  color: var(--rt-ink);
  text-align: center;
  text-wrap: pretty;
}
.rt-guide__art {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px 30px;
  margin: 30px auto 0;
}
/* One drawing per tab, all drawn to the same height */
.rt-guide__art-item {
  width: calc(150px * var(--w) / var(--h));
}
/* Placeholders: visibly unfinished until real places are supplied */
.rt-guide__spotify-frame {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 352px;
  margin: 34px auto 0;
  border: 0;
  border-radius: 12px;
}

/* ── Section 8: footer ── */
.rt-footer {
  position: relative;
  background-color: var(--rt-ink);
  color: rgba(247, 243, 233, 0.8);
  text-align: center;
}
.rt-footer__mark {
  width: min(46vw, 220px);
  margin: 0 auto;
  padding: 72px 0 40px;
}
.rt-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 24px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(247, 243, 233, 0.12);
}
.rt-footer .footer-names {
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 0.9em;
  color: rgba(247, 243, 233, 0.85);
}
.rt-footer .footer-countdown {
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(247, 243, 233, 0.7);
}
.rt-footer .footer-countdown span {
  font-weight: 500;
  color: rgba(247, 243, 233, 0.9);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .rt-footer__bar { justify-content: center; text-align: center; }
}

/* Portrait: the same 10vw border as the sections above */
@media (orientation: portrait) {
  .rt-rsvp, .rt-notes, .rt-guide { padding-left: 10vw; padding-right: 10vw; }
  .rt-rsvp__card, .rt-notes .commentForm { padding-left: 18px; padding-right: 18px; }
}

/* ── Chalk border: drawings and flourishes down the page edges ── */
/* Not clipped: flourishes run on into the next section. The page itself
   (#rt-invite, overflow-x: clip) trims whatever passes the screen edge. */
.rt-border {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rt-border__item {
  position: absolute;
  /* native width x size factor x a scale that shrinks with the margin */
  width: calc(var(--w) * var(--f) * min(0.85px, (100vw - 640px) / 760));
}
.rt-border__item--l {
  left: 0;
  transform: translateX(calc(var(--peek) * -1%)) rotate(var(--rot));
}
.rt-border__item--r {
  right: 0;
  transform: translateX(calc(var(--peek) * 1%)) rotate(var(--rot));
}

/* Phones and portrait tablets: the cards are narrower, leaving a border in
   which a few drawings and flourishes peek in from the screen edges */
@media (orientation: portrait), (max-width: 1023px) {
  .rt-border__item {
    display: none;
    top: var(--ptop) !important;
    width: calc(var(--w) * var(--f) * 0.42px);
  }
  .rt-border__item--phone { display: block; }
  .rt-border__item--l { transform: translateX(calc(var(--ppeek) * -1%)) rotate(var(--prot)); }
  .rt-border__item--r { transform: translateX(calc(var(--ppeek) * 1%)) rotate(var(--prot)); }
}

/* ── Guest name prompt (no ?name= in the link) ── */
#guestPrompt {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 900;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 22px 20px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 2px rgba(26, 10, 10, 0.08), 0 18px 40px -12px rgba(26, 10, 10, 0.3);
  font-family: var(--rt-sans);
  text-align: center;
  color: var(--rt-ink);
}
#guestPrompt p {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rt-ink-soft);
}
#guestPromptInput {
  width: 100%;
  padding: 4px 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(118, 29, 29, 0.4);
  border-radius: 0;
  background: transparent;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 18px;
  text-align: center;
  color: var(--rt-red);
  outline: none;
}
#guestPromptInput::placeholder {
  color: rgba(26, 10, 10, 0.4);
}
#guestPromptInput:focus-visible {
  border-bottom-color: var(--rt-red);
}
#guestPromptSubmit {
  display: none;
  width: 100%;
  margin-top: 14px;
  padding: 11px 22px;
  border: 0;
  border-radius: 2px;
  background: var(--rt-red);
  color: var(--rt-paper);
  font-family: var(--rt-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--rt-ease-out), background-color 200ms ease;
}
#guestPromptSubmit:active {
  transform: scale(0.97);
}
#guestPromptSubmit:focus-visible {
  outline: 2px solid var(--rt-focus);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  #guestPromptSubmit:hover { background: #5a1515; }
}

/* ── Temporary placeholder for sections still to be built ── */
.rt-next {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.rt-next__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rt-ink-soft);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .rt-intro { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Ox blood stationery: the invitation and the reply card, as on the
   save-the-date (#761d1d with the fibre texture), in beige ink.
   ───────────────────────────────────────────────────────────────── */
.rt-invitation .rt-card,
.rt-rsvp__card {
  --ink: rgba(247, 243, 233, 0.96);
  --ink-soft: rgba(247, 243, 233, 0.78);
  --rule: rgba(247, 243, 233, 0.24);
  background-color: var(--rt-red);
  color: var(--ink);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.22),
    0 14px 28px -10px rgba(26, 10, 10, 0.4),
    0 40px 72px -24px rgba(26, 10, 10, 0.55);
}
.rt-invitation .rt-card::before,
.rt-rsvp__card::before {
  background-image: var(--rt-tex-fibre);
  opacity: 0.35;
}
.rt-invitation .rt-card :focus-visible,
.rt-rsvp__card :focus-visible {
  outline-color: var(--ink) !important;
}

/* Invitation card */
.rt-invitation .rt-greet__to,
.rt-invitation .rt-inv__lead,
.rt-invitation .rt-inv__ask { color: var(--ink-soft); }
.rt-invitation .rt-greet__name,
.rt-invitation .rt-inv__names,
.rt-invitation .rt-detail dd { color: var(--ink); }
.rt-invitation .rt-greet__name--anon { color: var(--ink-soft); }
.rt-invitation .rt-greet__rule { background: var(--rule); }
.rt-invitation .rt-inv__amp { color: var(--ink-soft); }
.rt-invitation .rt-detail dt { color: var(--ink-soft); }
.rt-invitation .rt-details,
.rt-invitation .rt-detail,
.rt-invitation .rt-detail:nth-child(odd) { border-color: var(--rule); }

/* Reply card */
.rt-rsvp__card .rt-heading { color: var(--ink); }
.rt-rsvp__card .rt-rsvp__by,
.rt-rsvp__card .rt-rsvp__note-label { color: var(--ink-soft); }
.rt-rsvp__card .rsvpTotalBox h4 { color: var(--ink-soft); }
#rt-invite .rt-rsvp__card .button {
  border-color: var(--ink-soft);
  color: var(--ink);
}
#rt-invite .rt-rsvp__card .rsvpForm .attend:checked + label,
#rt-invite .rt-rsvp__card .button.fill {
  background: var(--rt-paper);
  border-color: var(--rt-paper);
  color: var(--rt-red);
}
@media (hover: hover) and (pointer: fine) {
  #rt-invite .rt-rsvp__card .button:hover { background: rgba(247, 243, 233, 0.14); color: var(--ink); }
  #rt-invite .rt-rsvp__card .button.fill:hover { background: #fff; border-color: #fff; color: var(--rt-red); }
}
.rt-rsvp__card .rsvpForm select {
  border-color: var(--ink-soft);
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f7f3e9' stroke-width='1.3' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
.rt-rsvp__card .rsvpForm select option { color: var(--rt-ink); }
.rt-rsvp__card .rsvpForm input[type="tel"],
.rt-rsvp__card .rsvpForm textarea {
  background: rgba(247, 243, 233, 0.08);
  border-bottom-color: var(--ink-soft);
  color: var(--ink);
}
.rt-rsvp__card .rsvpForm input[type="tel"]::placeholder,
.rt-rsvp__card .rsvpForm textarea::placeholder { color: rgba(247, 243, 233, 0.6); }
#rt-invite .rt-rsvp__card .rsvpForm .button.success {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.rt-rsvp__card .calGroup,
.rt-rsvp__card .calOptions__or { border-color: var(--rule); color: var(--ink-soft); }
.rt-rsvp__card .calGroup__title { color: var(--ink); }
.rt-rsvp__card .calOption { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────
   Navigation: a folded note card in the left border (desktop) that
   unfolds into the list of sections; on phones a small round paper
   button in the bottom-right corner, within thumb reach, that opens the
   same list upwards.
   ───────────────────────────────────────────────────────────────── */
.rt-nav {
  position: fixed;
  z-index: 800;
  text-align: left;
  top: 26px;
  left: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) rotate(-3deg);
  transition: opacity 600ms ease, transform 700ms var(--rt-ease-out), visibility 0s 600ms;
}
.rt-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: rotate(-3deg);
  transition: opacity 600ms ease, transform 700ms var(--rt-ease-out), visibility 0s;
}
.rt-nav__card {
  position: relative;
  width: 176px;
  background-color: var(--rt-card);
  box-shadow:
    0 1px 2px rgba(26, 10, 10, 0.14),
    0 10px 22px -8px rgba(26, 10, 10, 0.34);
  isolation: isolate;
}
.rt-nav__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rt-tex-laid);
  background-size: cover;
  opacity: 0.15;
  pointer-events: none;
}
.rt-nav__toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 14px 16px 15px;
  border: 0;
  background: none;
  color: var(--rt-ink);
  text-align: left;
  cursor: pointer;
}
.rt-nav__toggle:focus-visible,
.rt-nav__link:focus-visible {
  outline: 2px solid var(--rt-focus);
  outline-offset: 2px;
}
.rt-nav__title {
  grid-column: 1;
  margin-top: 2px;
  font-family: var(--rt-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.2;
}
.rt-nav__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 16px;
  height: 12px;
}
.rt-nav__icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 280ms var(--rt-ease-out), opacity 200ms ease;
}
.rt-nav__icon i:nth-child(1) { top: 0; }
.rt-nav__icon i:nth-child(2) { top: 5px; width: 70%; }
.rt-nav__icon i:nth-child(3) { top: 10px; }
.rt-nav.is-open .rt-nav__icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.rt-nav.is-open .rt-nav__icon i:nth-child(2) { opacity: 0; }
.rt-nav.is-open .rt-nav__icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* The unfold, as in the details */
.rt-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--rt-ease-out);
}
.rt-nav.is-open .rt-nav__panel {
  grid-template-rows: 1fr;
  transition-duration: 300ms;
}
.rt-nav__clip {
  min-height: 0;
  overflow: hidden;
}
.rt-nav__list {
  list-style: none;
  margin: 0;
  padding: 2px 16px 14px;
  border-top: 1px solid var(--rt-rule);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 220ms var(--rt-ease-out);
}
.rt-nav.is-open .rt-nav__list {
  opacity: 1;
  transform: none;
  transition: opacity 200ms 60ms ease, transform 280ms var(--rt-ease-out);
}
.rt-nav__link {
  display: block;
  padding: 9px 0;
  font-family: var(--rt-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--rt-ink);
  text-decoration: none;
  transition: color 200ms ease;
}
.rt-nav__link[aria-current="true"] {
  color: var(--rt-blue-ink);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .rt-nav__link:hover { color: var(--rt-blue-ink); }
}
.rt-nav__extra:empty { display: none; }

/* Phones and portrait tablets: a round button bottom-right that opens
   upwards into a card: Menu at the top, the sections, then music */
@media (orientation: portrait), (max-width: 1023px) {
  .rt-nav {
    top: auto;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    left: auto;
    right: 16px;
    transform: translateY(8px);
  }
  .rt-nav.is-visible { transform: none; }
  .rt-nav__card {
    width: 46px;
    border-radius: 23px;
    transition: width 280ms var(--rt-ease-out), border-radius 280ms var(--rt-ease-out);
    overflow: hidden;
  }
  .rt-nav.is-open .rt-nav__card {
    width: min(270px, calc(100vw - 24px));
    border-radius: 4px;
  }
  .rt-nav__toggle {
    height: 46px;
    padding: 0 15px;
  }
  .rt-nav__title {
    display: none;
  }
  .rt-nav.is-open .rt-nav__title {
    display: block;
    margin: 0;
    font-size: 17px;
  }
  .rt-nav__list {
    min-width: 240px;
    padding: 2px 16px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rt-nav, .rt-nav__panel, .rt-nav__list, .rt-nav__card, .rt-nav__icon i { transition: none !important; }
}

/* ── Section 6: guide tabs ── */
.rt-tabs {
  margin-top: 56px;
}
.rt-tabs__list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px 28px;
  flex-wrap: wrap;
}
.rt-tabs__tab {
  padding: 12px 2px 14px;
  border: 0;
  background: none;
  color: var(--rt-ink-soft);
  font-family: var(--rt-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease;
}
.rt-tabs__tab[aria-selected="true"] { color: var(--rt-ink); }
@media (hover: hover) and (pointer: fine) {
  .rt-tabs__tab:hover { color: var(--rt-blue-ink); }
}
.rt-tabs__tab:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 2px; }
/* The drawn underline that slides to the chosen tab (100px wide, scaled) */
.rt-tabs__ink {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100px;
  height: 2px;
  border-radius: 2px;
  background: var(--rt-blue);
  transform-origin: 0 50%;
  transition: transform 340ms var(--rt-ease-out);
  pointer-events: none;
}
.rt-tabs__sheet {
  position: relative;
  max-width: 780px;
  margin: 18px auto 0;
  text-align: left;
}
/* Each tab's places sit on a few short paper cards rather than one tall one
   (guideCardSizes), a small gap apart, so each card's texture shows whole.
   They stay straight: even a slight turn makes the hairline rules jagged. */
.rt-guide__card {
  position: relative;
  padding: 18px 40px 26px;
  background-color: var(--rt-card);
  box-shadow:
    0 2px 4px rgba(26, 10, 10, 0.14),
    0 12px 24px -10px rgba(26, 10, 10, 0.26),
    0 30px 56px -24px rgba(26, 10, 10, 0.4);
  isolation: isolate;
}
.rt-guide__card + .rt-guide__card { margin-top: 14px; }
.rt-tabs__panel:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 6px; }
.rt-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-guide__place {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 8px 32px;
  padding: 24px 0;
}
.rt-guide__place + .rt-guide__place { border-top: 1px solid var(--rt-rule); }
.rt-guide__place-name {
  margin: 0;
  font-family: var(--rt-serif);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.25;
}
.rt-guide__place-area {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rt-blue-ink);
}
.rt-guide__place-text {
  font-size: 0.95em;
  line-height: 1.7;
}
.rt-guide__map {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rt-guide__map:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 3px; }
.rt-guide__placeholder {
  margin: 20px 0;
  padding: 26px;
  outline: 1px dashed rgba(63, 96, 121, 0.55);
  text-align: center;
  color: var(--rt-ink-soft);
}
.rt-guide__art { margin: 18px auto 6px; }
/* The newly chosen page settles in, its places a beat apart */
.rt-tabs__panel.is-entering .rt-guide__place,
.rt-tabs__panel.is-entering .rt-guide__placeholder,
.rt-tabs__panel.is-entering .rt-guide__spotify-frame {
  animation: rtSettle 420ms var(--rt-ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * 45ms);   /* long lists: only the first few stagger */
}
@keyframes rtSettle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .rt-tabs__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .rt-tabs__tab {
    padding: 12px 8px;
    border: 1px solid rgba(26, 10, 10, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .rt-tabs__tab[aria-selected="true"] {
    border-color: var(--rt-blue-ink);
    background: var(--rt-blue-ink);
    color: var(--rt-paper);
  }
  .rt-tabs__ink { display: none; }
  .rt-guide__card { padding: 6px 20px 16px; }
  .rt-guide__card + .rt-guide__card { margin-top: 12px; }
  .rt-guide__place { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-tabs__ink { transition: none; }
  .rt-tabs__panel.is-entering .rt-guide__place,
  .rt-tabs__panel.is-entering .rt-guide__placeholder,
  .rt-tabs__panel.is-entering .rt-guide__spotify-frame { animation: rtFade 150ms ease both; }
}
@keyframes rtFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Music toggle (inside the navigation note) ── */
.rt-nav__extra {
  padding: 0 16px 14px;
}
.rt-music {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(26, 10, 10, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--rt-ink);
  font-family: var(--rt-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, transform 160ms var(--rt-ease-out);
}
.rt-music:active { transform: scale(0.97); }
.rt-music:focus-visible { outline: 2px solid var(--rt-focus); outline-offset: 2px; }
.rt-music.is-on { border-color: var(--rt-blue-ink); color: var(--rt-blue-ink); }
.rt-music__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.rt-music__bars i {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
}
.rt-music.is-on .rt-music__bars i { animation: rtBars 1.1s ease-in-out infinite; }
.rt-music.is-on .rt-music__bars i:nth-child(2) { animation-delay: -0.4s; }
.rt-music.is-on .rt-music__bars i:nth-child(3) { animation-delay: -0.75s; }
@keyframes rtBars {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-music.is-on .rt-music__bars i { animation: none; height: 8px; }
}

/* ── A canvas texture under everything after the film: one fine, seamless
   weave in the page's beige (site/invite/canvas.png), scrolling with the
   page and its drawings ── */
#rt-invite .rt-main {
  position: relative;
  background-color: var(--rt-paper);
  background-image: url("canvas.png");
  background-repeat: repeat;
  background-size: 320px 320px;
}

/* ── Lace doilies under the invitation and RSVP cards: stacked stationery ── */
.rt-doily {
  position: absolute;
  z-index: 0;
  top: 34px;
  left: 50%;
  width: min(820px, 128vw);
  aspect-ratio: 1 / 1;
  background: url("https://cdn.prod.website-files.com/69a032f3f3d37a0b3745556f/69a033a33b6a94b44004f54d_obj_lace_vintage-lace-handkerchief-19.png") no-repeat center / contain;
  transform: translateX(-50%) rotate(-7deg);
  filter: drop-shadow(0 6px 10px rgba(26, 10, 10, 0.18));
  pointer-events: none;
}
@media (orientation: portrait) {
  .rt-doily { top: 8px; width: 118vw; }
}
.rt-rsvp { isolation: isolate; }
.rt-doily--rsvp {
  top: 40px;
  width: min(780px, 124vw);
  transform: translateX(-50%) rotate(6deg);
}
@media (orientation: portrait) {
  .rt-doily--rsvp { top: 20px; width: 118vw; }
}
/* The section is always tall enough to hold the whole lace (tilted 6deg, its
   corners reach about 1.1x its width), so the guide below starts clear of it */
.rt-rsvp { min-height: calc(40px + min(780px, 124vw) * 1.1 + 56px); }
@media (orientation: portrait) {
  .rt-rsvp { min-height: calc(20px + 118vw * 1.1 + 56px); }
}

/* ─────────────────────────────────────────────────────────────────
   Cursors (mouse and trackpad only), all drawn by hand in ink: a small
   heart, filled with ox blood over anything that can be clicked; a text
   cursor in text fields; and a left-right arrow over the order of events
   cards, which turns ox blood while they are being dragged.
   ───────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  #rt-invite,
  #rt-invite * {
    cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath d="M17.2 27.6C11 23.4 4.6 18.2 4.6 11.6C4.6 7.2 8.6 4.8 12.2 6.6C14.2 7.6 15.4 9.4 16.1 11.2C16.7 8.8 18.6 6.6 21 6C24.8 5 28 7.8 27.4 12C26.6 17.6 20.4 22.6 14.6 28.4" fill="none" stroke="%23f7f3e9" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/%3E%3Cpath d="M17.2 27.6C11 23.4 4.6 18.2 4.6 11.6C4.6 7.2 8.6 4.8 12.2 6.6C14.2 7.6 15.4 9.4 16.1 11.2C16.7 8.8 18.6 6.6 21 6C24.8 5 28 7.8 27.4 12C26.6 17.6 20.4 22.6 14.6 28.4" fill="none" stroke="%231a0a0a" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M6 13.6C6.6 18 10.6 21.6 14.8 25.2M20.4 7.4C23.6 6.6 26.4 8.6 26.2 11.8" fill="none" stroke="%231a0a0a" stroke-width="0.8" stroke-linecap="round" opacity="0.5"/%3E%3C/svg%3E') 16 15, auto;
  }
  #rt-invite a,
  #rt-invite button,
  #rt-invite select,
  #rt-invite label[for],
  #rt-invite [role="tab"],
  #rt-invite .button,
  #rt-invite a *,
  #rt-invite button * {
    cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath d="M17.2 27.6C11 23.4 4.6 18.2 4.6 11.6C4.6 7.2 8.6 4.8 12.2 6.6C14.2 7.6 15.4 9.4 16.1 11.2C16.7 8.8 18.6 6.6 21 6C24.8 5 28 7.8 27.4 12C26.6 17.6 20.4 22.6 14.6 28.4" fill="none" stroke="%23f7f3e9" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/%3E%3Cpath d="M16.4 26.6C11 22.6 5.6 18 5.6 11.8C5.6 8 9 6.2 12 7.6C14 8.6 15.2 10.4 16.1 12.6C16.8 10 18.6 7.8 21 7.1C24.4 6.2 26.8 8.6 26.4 12C25.8 17.2 20.8 21.8 16.4 26.6Z" fill="%23761d1d" opacity="0.9"/%3E%3Cpath d="M17.2 27.6C11 23.4 4.6 18.2 4.6 11.6C4.6 7.2 8.6 4.8 12.2 6.6C14.2 7.6 15.4 9.4 16.1 11.2C16.7 8.8 18.6 6.6 21 6C24.8 5 28 7.8 27.4 12C26.6 17.6 20.4 22.6 14.6 28.4" fill="none" stroke="%231a0a0a" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M6 13.6C6.6 18 10.6 21.6 14.8 25.2M20.4 7.4C23.6 6.6 26.4 8.6 26.2 11.8" fill="none" stroke="%231a0a0a" stroke-width="0.8" stroke-linecap="round" opacity="0.5"/%3E%3C/svg%3E') 16 15, pointer;
  }
  #rt-invite input[type="text"],
  #rt-invite input[type="tel"],
  #rt-invite input:not([type]),
  #rt-invite textarea {
    cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath d="M16.2 5.6C16 11.2 16.3 20.6 15.9 26.4 M11.8 5.2C13.6 4.6 14.9 5.6 16.2 5.6C17.4 5.6 18.6 4.4 20.4 5.1M11.6 26.9C13.4 27.4 14.7 26.3 15.9 26.4C17.2 26.5 18.5 27.6 20.2 27" stroke="%23f7f3e9" stroke-linecap="round" stroke-linejoin="round" opacity="0.75" fill="none" stroke-width="3.4"/%3E%3Cpath d="M16.2 5.6C16 11.2 16.3 20.6 15.9 26.4" fill="none" stroke="%231a0a0a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.8 5.2C13.6 4.6 14.9 5.6 16.2 5.6C17.4 5.6 18.6 4.4 20.4 5.1M11.6 26.9C13.4 27.4 14.7 26.3 15.9 26.4C17.2 26.5 18.5 27.6 20.2 27" fill="none" stroke="%231a0a0a" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M15.4 8.2C15.3 13 15.5 18.8 15.3 23.6" fill="none" stroke="%231a0a0a" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" opacity="0.45"/%3E%3C/svg%3E') 16 16, text;
  }
  #rt-invite .rt-events--h .rt-events__track,
  #rt-invite .rt-events--h .rt-events__track * { cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath d="M5.4 16.4C10.4 15.6 21 16.6 26.6 15.8 M9.6 11.6C8 13.4 6.4 15 5.2 16.4C6.6 17.6 8.4 19 10 20.6M22.4 11.2C24 12.8 25.6 14.4 26.8 15.8C25.4 17.2 23.8 18.8 22 20.4" stroke="%23f7f3e9" stroke-linecap="round" stroke-linejoin="round" opacity="0.75" fill="none" stroke-width="3.6"/%3E%3Cpath d="M5.4 16.4C10.4 15.6 21 16.6 26.6 15.8 M9.6 11.6C8 13.4 6.4 15 5.2 16.4C6.6 17.6 8.4 19 10 20.6M22.4 11.2C24 12.8 25.6 14.4 26.8 15.8C25.4 17.2 23.8 18.8 22 20.4" fill="none" stroke="%231a0a0a" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M7.6 17.2C12.4 16.8 19.6 17.2 24.4 16.8" fill="none" stroke="%231a0a0a" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/%3E%3C/svg%3E') 16 16, grab; }
  #rt-invite .rt-events--h.is-dragging .rt-events__track,
  #rt-invite .rt-events--h.is-dragging .rt-events__track * { cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath d="M5.4 16.4C10.4 15.6 21 16.6 26.6 15.8 M9.6 11.6C8 13.4 6.4 15 5.2 16.4C6.6 17.6 8.4 19 10 20.6M22.4 11.2C24 12.8 25.6 14.4 26.8 15.8C25.4 17.2 23.8 18.8 22 20.4" stroke="%23f7f3e9" stroke-linecap="round" stroke-linejoin="round" opacity="0.75" fill="none" stroke-width="3.6"/%3E%3Cpath d="M5.4 16.4C10.4 15.6 21 16.6 26.6 15.8 M9.6 11.6C8 13.4 6.4 15 5.2 16.4C6.6 17.6 8.4 19 10 20.6M22.4 11.2C24 12.8 25.6 14.4 26.8 15.8C25.4 17.2 23.8 18.8 22 20.4" fill="none" stroke="%23761d1d" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M7.6 17.2C12.4 16.8 19.6 17.2 24.4 16.8" fill="none" stroke="%23761d1d" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/%3E%3C/svg%3E') 16 16, grabbing; }
}