:root {
  color-scheme: only light;
  --invitation-paper: #eae5dc url(ivory-paper.webp) repeat;
  --ink: #513419;
  --gold: #896028;
  --hairline: #c4a46b;
  --serif: "Cormorant Garamond", Georgia, serif;
  --khmer: "Battambang", "Khmer Sangam MN", serif;
  color: var(--ink);
  background: #e6dfd4;
  font-family: var(--khmer);
  line-height: 1.8;
}
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; }
body { margin: 0; }
.sheet, .rsvp, footer { scroll-snap-align: start; }
.sheet { scroll-snap-stop: always; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}
html:lang(en) { font-family: var(--serif); font-size: 18px; line-height: 1.45; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid #77521d; outline-offset: 3px; }
.languages {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
}
.languages button {
  min-height: 44px; padding: 0 .6rem; border: 0; background: transparent;
  color: var(--ink); font-size: .85rem; cursor: pointer;
}
.languages button { min-width: 42px; }
.languages [aria-pressed=true] { box-shadow: inset 0 -2px #906425; }
main { width: min(100%, 900px); margin: 0 auto; background: var(--invitation-paper); }
.stationery { container-type: inline-size; }
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-image-repeat: stretch round;
}
.front::before {
  padding-block: 30.4cqw;
  background: url(letter-front-gold-middle.webp) center / 100% auto no-repeat content-box;
  background-repeat: no-repeat round;
  border-image-source: url(letter-front-gold.webp);
  border-image-slice: 38% 13% fill;
  border-image-width: 30.4cqw 13cqw;
}
.center::before {
  padding-block: 32cqw;
  background: url(ivory-center-middle.webp) center / 100% auto no-repeat content-box;
  background-repeat: no-repeat round;
  border-image-source: url(ivory-center.webp);
  border-image-slice: 40% 12% fill;
  border-image-width: 32cqw 12cqw;
}
.side::before {
  padding-block: min(32cqw, 200px);
  background: url(ivory-side-middle.webp) center / 100% auto no-repeat content-box;
  background-repeat: no-repeat round;
  border-image-source: url(ivory-side.webp);
  border-image-slice: 20% 12% fill;
  border-image-width: min(32cqw, 200px) min(12cqw, 75px);
}
@media (scripting: enabled) {
  :is(.center, .side):not(:target, .frame-ready)::before { border-image-source: none; }
}
.sheet {
  position: relative; isolation: isolate;
  width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sheet > * { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { color: #76501f; font-family: Moul, var(--khmer); font-weight: 400; line-height: 1.75; }
h1 { font-size: clamp(1.4rem, 3.8vw, 2.65rem); }
h2 { font-size: clamp(1.18rem, 3vw, 1.95rem); }
:lang(en):is(h1,h2) { font: 500 clamp(2rem, 5vw, 3.5rem)/1.1 var(--serif); }
.front {
  background-color: #eae1d8;
  aspect-ratio: 5 / 4;
  padding: clamp(55px, 6vw, 78px) 10% clamp(54px, 5vw, 68px);
}
.crest { width: clamp(164px, 25vw, 310px); height: auto; margin-bottom: clamp(20px, 3vw, 36px); }
.invite-line { font-size: clamp(.98rem, 2vw, 1.3rem); }
.guestplate[hidden] { display: none; }
.guestplate {
  color: #8b580d;
  --frame-half-height: clamp(21px, 4vw, 32px);
  display: grid; place-items: center; position: relative;
  width: min(100%, 550px); min-height: calc(2 * var(--frame-half-height));
  padding: .65em calc(2 * var(--frame-half-height) + .4em);
  margin: .7rem auto 1.5rem; overflow-wrap: anywhere;
  font-weight: bold; font-size: clamp(1.1rem, 2.6vw, 1.65rem); line-height: 1.5;
}
.guestplate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;

  /* The central rectangle can grow vertically when a guest name wraps. */
  inset-inline: calc(1.55 * var(--frame-half-height));
  border-image: url(guest-frame-box.webp) 28 28 / calc(.44 * var(--frame-half-height)) stretch;
}
.guestplate::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
  height: calc(2 * var(--frame-half-height)); pointer-events: none;
  background: url(guest-frame-left.webp) left center / auto 100% no-repeat,
    url(guest-frame-right.webp) right center / auto 100% no-repeat;
}
.cover-date, .venue, .event-date, .program-date { font-weight: 700; }
.cover-venue, .cover-address, .address { font-size: .92rem; }
.cover-date { margin-bottom: .35rem; }
.center { padding: clamp(88px, 12vw, 145px) clamp(35px, 8vw, 124px); }
.families, .couple { width: 100%; display: flex; justify-content: space-evenly; gap: 1rem; }
.families { margin: 1.15rem 0; }
.families p { margin: .12rem 0; }
.center h3 { font-size: 1.08rem; }
.salutation { margin: .4rem auto 1rem; max-width: 58ch; }
.couple { align-items: center; margin: .35rem 0 1.1rem; }
.couple small { display: block; font-size: .9rem; }
.couple strong { font-size: clamp(1.3rem, 2.8vw, 2rem); }
.amp { color: var(--gold); font: italic 2rem/1 var(--serif); }
.venue { margin-top: .65rem; }
.rule { display: flex; align-items: center; gap: 10px; width: min(200px, 50%); margin: 1rem 0 .45rem; color: var(--gold); }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.side { padding: clamp(64px, 7vw, 100px) clamp(38px, 6vw, 84px); }
.monogram { height: auto; width: clamp(85px, 13vw, 140px); margin: 0 0 1rem; }
.program-date { margin-top: .45rem; }
.schedule { list-style: none; width: min(100%, 485px); padding: 0; margin: 1.3rem 0; text-align: start; }
.schedule li { display: grid; grid-template-columns: max-content 1fr; gap: .85rem; padding: .45rem 0; }
.schedule time { min-width: 4.65rem; font-variant-numeric: tabular-nums; color: #6c471d; font-weight: bold; }
.map { margin: .55rem auto 0; text-underline-offset: .3em; }
.sheet.gift { min-height: 0; padding: 2.75rem 9%; }
.gift::before {
  background: none;
  padding: 0;
  border-image-width: clamp(52px, 18cqw, 90px) clamp(20px, 6.75cqw, 34px);
  border-image-repeat: stretch;
}
.gift-card { width: min(100%, 208px); margin: .6rem 0 0; }
.gift-bank { font: 600 1.4rem/1.5 var(--serif); letter-spacing: .08em; color: var(--gold); }
.gift-code { margin-top: .7rem; overflow: hidden; border: 3px double var(--hairline); background: white; }
.gift-network { padding: .35rem; background: #76501f; color: #fffaf0; font: 600 1rem/1.5 system-ui, sans-serif; }
.gift-recipient { margin-top: .85rem; font: 600 1rem/1.5 system-ui, sans-serif; letter-spacing: .06em; }
.gift-code img { display: block; width: 100%; height: auto; }
.rsvp { margin: 0; padding: clamp(26px, 5vw, 68px); background: var(--invitation-paper); }
.rsvp-wrap { max-width: 560px; margin-inline: auto; }
.rsvp-copy { text-align: center; margin-bottom: 1.25rem; }
.eyebrow, .rsvp-copy h2 + p { display: none; }
.rsvp-form { display: grid; gap: .75rem; }
.rsvp-form label { display: grid; gap: .3rem; }
input, select, textarea { min-width: 0; width: 100%; background: #fffbf4; padding: .65rem; color: var(--ink); border: 1px solid #c8b99e; }
.button { cursor: pointer; padding: .7rem; background: #735325; color: white; border: 0; }
footer { max-width: 900px; margin: auto; background: var(--invitation-paper); text-align: center; padding: 1.5rem; }
@media (max-width: 600px) {
  .sheet.gift { aspect-ratio: 900 / 1439; }
  .sheet.gift::before {
    border-image: none;
    background: url(ivory-side.webp) center / 100% 100% no-repeat;
  }
  .front { padding: 58px 9% 64px; }
  .center { padding: 78px 8%; }
  .side { padding: 68px 9% 72px; }
  .families, .couple { gap: .45rem; }
  .families { font-size: .92rem; }
  .schedule li { gap: .45rem; }
  .schedule time { min-width: 4.35rem; }
}
@media (max-width: 360px) {
  .couple { flex-direction: column; }
}
.side .address { max-width: 88%; }