/* Legal pages (/terms, /privacy, /refunds): a single sheet of invitation
   stock on paper — readable measure, editorial headings, wax-seal accents. */
body.legal {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
}
body.legal::before {   /* paper grain, kept faint so the page stays warm cream */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .12;
  pointer-events: none;
}

.legal-wrap {
  max-width: 760px;
  margin: 28px auto 64px;
  padding: 0 16px;
}

.legal-head { padding: 28px 4px 22px; }
.legal-k {
  margin: 0 0 10px;
  font: 700 .72rem/1 var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wax);
}
.legal-head h1 {
  margin: 0;
  font: 800 clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem)/1.02 var(--display);
  letter-spacing: -.02em;
  color: var(--ink-deep);
}
.legal-date { margin: 10px 0 22px; color: var(--ink-soft); font-size: .92rem; }

.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-tabs a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--paper-edge);
  background: rgba(255, 255, 255, .55);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.legal-tabs a:hover { color: var(--ink); border-color: var(--ink-soft); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .legal-tabs a, .legal-tabs a:hover { transition: none; transform: none; } }
.legal-tabs a:focus-visible { outline: 3px solid var(--wax); outline-offset: 2px; }
.legal-tabs a:active { transform: translateY(0); }
.legal-tabs a[aria-current="page"] { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }

/* 34: the same card stock as the rest of the site (pricing cards, the RSVP card, the final
   invitation): near-square corners, fine grain, a hairline rule inset from the edge, paper shadow. */
.legal-body {
  position: relative;
  background: var(--grain-fine), var(--card-stock);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  outline: 1px solid rgba(42, 30, 66, .1);
  outline-offset: -12px;
  box-shadow: var(--shadow-paper);
  padding: clamp(30px, 4.5vw, 60px) clamp(26px, 4.5vw, 60px);
  font-size: 1.02rem;
  line-height: 1.7;
}
.legal-body::before {   /* a wax-pink edge along the top, like the "best value" pricing card */
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 5px;
  border-radius: 4px 4px 0 0;
  background: var(--grad-party);
}
.legal-lede {
  margin-top: 0;
  font: 400 1.22rem/1.55 var(--display);
  color: var(--ink-deep);
}
.legal-body h2 {
  margin: 2.2em 0 .5em;
  font: 700 1.35rem/1.25 var(--display);
  color: var(--ink-deep);
  scroll-margin-top: 90px;
}
.legal-body h3 {
  margin: 1.4em 0 .3em;
  font: 700 .78rem/1.3 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin: .45em 0; }
.legal-body li::marker { color: var(--wax); }
.legal-body a { color: var(--wax-deep); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--wax); }
.legal-body a.btn, .legal-body a.btn:hover { color: var(--ink-deep); text-decoration: none; }
.legal-contact {
  margin: 2.4em 0 0;
  padding-top: 1.2em;
  border-top: 1px dashed var(--paper-edge);
  color: var(--ink-soft);
  font-size: .95rem;
}

.legal-foot { padding: 0 16px 40px; text-align: center; color: var(--ink-soft); font-size: .88rem; }
.legal-foot a { color: inherit; text-underline-offset: 3px; }
.legal-foot a:hover { color: var(--ink); }
.legal-foot a:focus-visible { outline: 3px solid var(--wax); outline-offset: 2px; border-radius: 3px; }
.legal-foot__line { margin: .4rem 0 0; font-family: var(--display); font-style: italic; }

/* 404 page: the same paper card, centred, with a wax seal */
.nf { display: grid; place-items: center; min-height: 70vh; }
.nf-card { text-align: center; max-width: 560px; }
.nf-card h1 { margin: .2em 0 .4em; font: 800 clamp(2rem, 1.4rem + 2.4vw, 2.8rem)/1.05 var(--display); color: var(--ink-deep); }
.nf-seal {   /* the master seal, set slightly askew like it was pressed by hand */
  display: block; width: 84px; height: 84px; margin: 0 auto 14px; transform: rotate(-8deg);
  filter: drop-shadow(0 8px 10px rgba(90, 0, 30, .28));
}
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.4em; }