/* ==========================================================================
   Savannah & Justin – wedding website
   Source of truth: Savannah&Justin_Website design_Final.idml / .pdf
   Design canvas: 1280pt wide. On desktop (>=1024px) every element is placed
   at its exact InDesign position; 1 design point = var(--px), which equals
   1px at 1280px wide and scales down proportionally on narrower screens.
   Below 1024px the layout reflows (tablet / mobile).

   InDesign -> CSS conversions used:
     tracking N      -> letter-spacing: N/1000 em
     leading         -> line-height (px)
     "All Caps"      -> text-transform: uppercase
   ========================================================================== */

/* ---------- Fonts (converted from "Document fonts" to WOFF2) ---------- */
/* ascent/descent/line-gap overrides make vertical metrics identical on every
   OS, so baselines land exactly where InDesign put them. */
@font-face {
  font-family: "Classy Vogue";
  src: url("../assets/fonts/ClassyVogue.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Avenir";
  src: url("../assets/fonts/Avenir-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni 72";
  src: url("../assets/fonts/Bodoni72-BookItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "MonthGlade";
  src: url("../assets/fonts/MonthGlade.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --black: #000000;   /* swatch "Black"  R0 G0 B0 */
  --paper: #ffffff;   /* swatch "Paper"  */
  --display: "Classy Vogue", "Times New Roman", serif;
  --sans: "Avenir", "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --script: "Bodoni 72", "Bodoni MT", "Didot", Georgia, serif;
  --hand: "MonthGlade", "Snell Roundhand", cursive;
  --nav: "Lato", "Helvetica Neue", Arial, sans-serif;
  /* 1 design point; resolved inside .page (a size container) */
  --px: calc(min(100cqw, 1280px) / 1280);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--black); color: var(--paper);
  font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 1px dashed var(--paper); outline-offset: 4px; }

.page { max-width: 1280px; margin: 0 auto; container-type: inline-size; background: var(--black); overflow: hidden; }
section[id] { scroll-margin-top: 0; }

/* shared type styles */
.trk-250 { letter-spacing: .25em; }
.trk-100 { letter-spacing: .1em; }
.trk-300 { letter-spacing: .3em; }

/* ==========================================================================
   MOBILE / TABLET  (base styles, < 1024px)
   ========================================================================== */
.site-header { padding: 43px 16px 42px; text-align: center; }
.site-title {
  font-family: var(--display); font-size: clamp(20px, 6.2vw, 32.665px); line-height: 1.25;
  letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; font-weight: 400;
}
.site-nav {
  margin-top: 14px; font-family: var(--nav); font-weight: 500; font-size: 11px; line-height: 2.1;
  letter-spacing: .25em; text-transform: uppercase;
}
.site-nav a { white-space: nowrap; padding: 4px 2px; }

/* photo frames: image is placed by % so the crop matches the design at any size */
.frame {
  position: relative; overflow: hidden; background: var(--black);
  aspect-ratio: var(--ar);
}
.frame img {
  position: absolute; left: var(--ix); top: var(--iy);
  width: var(--iw); height: auto; max-width: none;
}
.hero-1 { --ar: 423.89/541.33; --ix: -9.281%; --iy: -10.035%; --iw: 117.221%; --fy: 0.436; }
.hero-2 { --ar: 426.23/541.33; --ix: -4.479%; --iy: -4.735%;  --iw: 105.708%; --fy: 0.437; }
.hero-3 { --ar: 422.57/541.33; --ix: -18.006%; --iy: -2.320%; --iw: 149.187%; --fy: 0.299; }
.roses  { --ar: 1280/554.98;  --ix: -3.082%; --iy: -125.430%; --iw: 104.274%; --fy: 0.486; }
.gazebo { --ar: 1280/815.39;  --ix: 0%;      --iy: -34.585%;  --iw: 100%;     --fy: 0.359; }
.marry  { --ar: 1280/774.21;  --ix: 0%;      --iy: -92.825%;  --iw: 100%;     --fy: 0.576; }
/* toast: the black background frame covers the top 74.2pt of this photo in the design, so the visible crop starts at y 4851.9 */
.toast  { --ar: 1280/699.99;  --ix: 0%;      --iy: -96.382%;  --iw: 103.877%; --fy: 0.514; }

.hero { display: grid; grid-template-columns: 1fr; gap: 3px; }
.hero .frame { width: 100%; }
@media (min-width: 640px) {
  .hero { grid-template-columns: 423.89fr 426.23fr 422.57fr; gap: 3.66px; }
}

/* On narrow screens the very wide photo bands become taller crops, centred on the same focal point */
/* --fy = focal point (fraction of image height, taken from the design crop); photos are 2:3.
   --fh = frame height as a fraction of its width. object-position centres the focal point in the frame. */
.photo-band { aspect-ratio: 4 / 5; --fh: 1.25; }
.photo-band img {
  left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% clamp(0%, calc((var(--fy) * 1.5 - var(--fh) / 2) / (1.5 - var(--fh)) * 100%), 100%);
}
@media (min-width: 640px) { .photo-band { aspect-ratio: 16 / 10; --fh: 0.625; } }

/* text sections */
.invitation, .information, .stay, .order, .rsvp { position: relative; padding: 42px 20px; text-align: center; }
.invitation { padding-bottom: 45px; }  /* evens out the text-to-photo gap on tablet/mobile */
.invitation > *, .information > *, .stay > *, .order > *, .rsvp > * { position: relative; }

.monogram {
  position: absolute !important; left: 50%; top: 50%; width: min(70vw, 317px); height: auto;
  transform: translate(-50%, -50%); opacity: .07; pointer-events: none;
}
.invite-line, .body-text, .married, .event-text, .choice-text {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.9; text-transform: uppercase;
}
.invite-line, .married { padding-left: .25em; }
.names { margin: 30px 0 28px; font-weight: 400; }
.name {
  display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 11vw, 58.14px); line-height: 1.2; letter-spacing: .2em; padding-left: .2em;
}
.and { display: block; font-family: var(--hand); font-size: clamp(30px, 9vw, 50.8px); line-height: 1.2; }
.married { font-size: 14px; line-height: 2; }
.reception-follow { margin-top: 24px; font-family: var(--hand); font-size: 14px; line-height: 1.7; }

.section-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 8.6vw, 47.3px); line-height: 1.2; letter-spacing: .15em; padding-left: .15em;
}
.sub-title {
  margin-top: 36px; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 6vw, 30px); line-height: 1.3; letter-spacing: .25em; padding-left: .25em;
}
.body-text { margin-top: 10px; padding-left: .25em; }
.body-16 { font-size: 13.5px; }
.bank { margin-top: 36px; }
.script-text {
  font-family: var(--script); font-style: italic; font-size: 14.5px; line-height: 1.8;
  padding-left: .25em;
}
.bank-note { margin-top: 4px; }
.icon-dress, .icon-suit { display: none; }

.stay-intro { margin-top: 18px; }
.stay-click { margin-top: 30px; }
.lodges { margin-top: 26px; }
.lodges li { margin-top: 24px; }
.lodges a { display: block; padding: 2px 0; }
.lodge-name, .lodge-dist { display: block; }
.stay-uber { margin-top: 30px; }
.br-desktop { display: none; }

/* order of events: wraps into a grid on small screens */
.timeline-line { display: none; }
.events { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 12px; }
.event { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.event-icon { position: static; width: auto; height: 62px; margin-bottom: 14px; }
.event::before { content: ""; width: 1px; height: 24px; background: var(--paper); margin-bottom: 12px; order: 1; }
.event-icon { order: 0; }
.event-text { order: 2; padding-left: .25em; font-size: 12px; line-height: 2; }
.event-time, .event-name { display: block; }
@media (min-width: 560px) { .events { grid-template-columns: repeat(3, 1fr); } }

/* RSVP form */
.rsvp-form { max-width: 560px; margin: 28px auto 0; text-align: left; }
.choices { border: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.choice { display: flex; align-items: center; gap: 15px; cursor: pointer; min-width: 240px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-mark {
  flex: none; width: 19.7px; height: 19.7px; border: 1px solid var(--paper); border-radius: 50%;
  position: relative;
}
.choice-mark::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--paper);
  transform: scale(0); transition: transform .15s ease;
}
.choice input:checked + .choice-mark::after { transform: scale(1); }
.choice input:focus-visible + .choice-mark { outline: 1px dashed var(--paper); outline-offset: 4px; }
.choice-text { padding-left: 0; font-size: 14px; line-height: 24px; }

.field {
  display: block; width: 100%; margin: 0 0 21px; background: transparent; color: var(--paper);
  border: 1px solid var(--paper); border-radius: 0; padding: 7px 18px;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 24px; text-transform: uppercase;
  -webkit-appearance: none; appearance: none; caret-color: var(--paper);
}
.field::placeholder { color: var(--paper); opacity: 1; }
.field-comments { min-height: 96px; resize: none; padding-top: 9px; }
.field:focus-visible { outline: 1px dashed var(--paper); outline-offset: 4px; }
.field[aria-invalid="true"], .choices[aria-invalid="true"] .choice-mark { border-color: var(--paper); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.rsvp-button {
  display: block; margin: 8px auto 0; width: 110px; height: 31.6px; padding: 0 0 0 .3em;
  background: var(--black); color: var(--paper); border: 1px solid var(--paper); border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; line-height: 24px; text-transform: uppercase; text-align: center;
  -webkit-appearance: none; appearance: none;
}
.rsvp-button[disabled] { opacity: .5; cursor: wait; }
.form-error {
  margin-top: 18px; text-align: center; font-family: var(--script); font-style: italic;
  font-size: 14.5px; line-height: 1.7; letter-spacing: .1em;
}
.thanks { margin: 36px auto 0; text-align: center; }
.thanks-title {
  font-family: var(--display); text-transform: uppercase; font-size: 30px; line-height: 1.3;
  letter-spacing: .25em; padding-left: .25em;
}
.thanks-text { margin-top: 12px; }
.closing { margin-top: 40px; }
[hidden] { display: none !important; }

/* ==========================================================================
   DESKTOP  (>= 1024px): pixel-faithful layout from the InDesign file.
   All numbers below are design points measured from the IDML / PDF
   (page = 1280 x 6122.62). Each text block is placed by its first baseline.
   ========================================================================== */
@media (min-width: 1024px) {
  .br-desktop { display: inline; }
  .page > header, .page main > section, .page main > .frame { width: 100%; }
  .page main > section { padding: 0; text-align: center; }
  :where(.page main > section:not(.hero) > *) { left: 0; right: 0; }   /* zero specificity: per-element left/right win */
  .page main > section:not(.hero) > * { position: absolute; margin: 0; }

  /* helper: top / line-height in design points */
  .site-header, .invitation, .information, .stay, .order, .rsvp { padding: 0; }

  /* SPACING (approved by Danel): every text block keeps 48pt between its text and the neighbouring photo / page edge.
     Content positions below were shifted and section heights adjusted accordingly; fonts, sizes, crops unchanged. */
  /* ----- header (0 – 163.96) ----- */
  .site-header { position: relative; height: calc(var(--px) * 163.96); }
  .site-title {
    position: absolute; left: 0; right: 0; top: calc(var(--px) * 41.80); margin: 0;
    font-size: calc(var(--px) * 32.665); line-height: calc(var(--px) * 39.2);
    letter-spacing: .2em; padding-left: .2em; white-space: nowrap;
  }
  .site-nav {
    position: absolute; left: 0; right: 0; top: calc(var(--px) * 103.41); margin: 0;
    font-size: calc(var(--px) * 11.98); line-height: calc(var(--px) * 14.4);
    letter-spacing: .25em; padding-left: .25em; white-space: pre;
  }
  .site-nav a { padding: 0; white-space: pre; }

  /* ----- hero strip ----- */
  .hero { display: block; position: relative; height: calc(var(--px) * 541.33); }
  .hero .frame { position: absolute; top: 0; height: 100%; aspect-ratio: auto; }
  .hero .hero-1 { left: 0; width: calc(100% * 423.89 / 1280); }
  .hero .hero-2 { left: calc(100% * 427.55 / 1280); width: calc(100% * 426.23 / 1280); }
  .hero .hero-3 { left: calc(100% * 857.43 / 1280); width: calc(100% * 422.57 / 1280); }

  /* ----- invitation (section height 493.97) ----- */
  .invitation { height: calc(var(--px) * 493.97); }
  .monogram {
    left: calc(var(--px) * 481.38) !important; right: auto !important; top: calc(var(--px) * 50.63) !important;
    width: calc(var(--px) * 317.25); height: calc(var(--px) * 347.23); transform: none;
  }
  .invitation .invite-line { top: calc(var(--px) * 41.60); font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24); white-space: nowrap; padding-left: .25em; }
  .names { margin: 0; position: static; }
  .invitation .name { position: absolute; left: 0; right: 0; font-size: calc(var(--px) * 58.14); line-height: calc(var(--px) * 69.77); letter-spacing: .2em; padding-left: .2em; }
  .name-savannah { top: calc(var(--px) * 120.87); }
  .name-justin { top: calc(var(--px) * 234.77); }
  .invitation .and {
    position: absolute; left: calc(var(--px) * 580); width: calc(var(--px) * 114); top: calc(var(--px) * 175.98);
    font-size: calc(var(--px) * 50.8); line-height: calc(var(--px) * 60.96);
  }
  .invitation .married { top: calc(var(--px) * 349.90); font-size: calc(var(--px) * 18); line-height: calc(var(--px) * 28); white-space: nowrap; padding-left: .25em; }
  .invitation .reception-follow { top: calc(var(--px) * 424.40); margin: 0; font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24); padding: 0; }

  /* ----- photo bands ----- */
  .photo-band { aspect-ratio: var(--ar); }
  .photo-band img {
    left: var(--ix); top: var(--iy); width: var(--iw); height: auto; object-fit: fill; object-position: 50% 50%;
  }

  /* ----- information (section height 552.94) ----- */
  .information { height: calc(var(--px) * 552.94); }
  .information .section-title { top: calc(var(--px) * 39.88); font-size: calc(var(--px) * 47.3); line-height: calc(var(--px) * 56.76); letter-spacing: .15em; padding-left: .15em; }
  .icon-dress, .icon-suit { display: block; position: absolute !important; right: auto !important; height: auto; }
  .icon-dress { left: calc(var(--px) * 141.99); top: calc(var(--px) * 81.49); width: calc(var(--px) * 84.98); }
  .icon-suit  { left: calc(var(--px) * 1051.15); top: calc(var(--px) * 107.20); width: calc(var(--px) * 91.71); }
  .information .sub-title { margin: 0; font-size: calc(var(--px) * 30); line-height: calc(var(--px) * 36); letter-spacing: .25em; padding-left: .25em; }
  .attire-title { top: calc(var(--px) * 142.65); }
  .gifts-title { top: calc(var(--px) * 250.65); }
  .information .body-text, .stay .body-text { margin: 0; font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24); white-space: nowrap; padding-left: .25em; }
  .attire-text { top: calc(var(--px) * 177.45); }
  .gifts-text { top: calc(var(--px) * 285.45); }
  .information .bank { top: calc(var(--px) * 382.55); }
  .information .bank-note { top: calc(var(--px) * 483.95); margin: 0; font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); }

  /* ----- where to stay (section height 542.95) ----- */
  .stay { height: calc(var(--px) * 542.95); }
  .stay .section-title { top: calc(var(--px) * 39.55); font-size: calc(var(--px) * 47.3); line-height: calc(var(--px) * 56.76); }
  .stay .stay-intro { top: calc(var(--px) * 102.12); font-size: calc(var(--px) * 16); }
  .stay .stay-click { top: calc(var(--px) * 177.52); margin: 0; font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); }
  .stay .lodges { top: calc(var(--px) * 230.72); margin: 0; font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); padding-left: .25em; }
  .lodges li { margin: 0 0 calc(var(--px) * 24); }
  .lodges a { display: inline-block; padding: 0; }
  .stay .stay-uber { top: calc(var(--px) * 450.12); margin: 0; font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); white-space: nowrap; }

  /* ----- order of events (section height 355.06) ----- */
  .order { height: calc(var(--px) * 355.06); }
  .order .section-title { top: calc(var(--px) * 40.19); font-size: calc(var(--px) * 47.3); line-height: calc(var(--px) * 56.76); }
  .order .timeline-line {
    display: block; left: calc(var(--px) * 136); right: auto; width: calc(var(--px) * 1008);
    top: calc(var(--px) * 225.16); height: 1px; background: var(--paper);
  }
  .order .events { position: absolute; inset: 0; margin: 0; display: block; }
  .event { position: static; display: block; }
  .event::before {
    content: ""; position: absolute; top: calc(var(--px) * 210.86); height: calc(var(--px) * 30.6);
    width: 1px; margin: 0; background: var(--paper); order: 0;
  }
  .event-icon { position: absolute; height: auto; margin: 0; }
  .event-text {
    position: absolute; top: calc(var(--px) * 266.96); width: calc(var(--px) * 200); margin: 0;
    font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24); white-space: nowrap; padding-left: .25em;
  }
  .ev-1::before { left: calc(var(--px) * 185); } .ev-1 .event-icon { left: calc(var(--px) * 136.82); top: calc(var(--px) * 125.05); width: calc(var(--px) * 96.35); }
  .ev-1 .event-text { left: calc(var(--px) * 86); }
  .ev-2::before { left: calc(var(--px) * 366.6); } .ev-2 .event-icon { left: calc(var(--px) * 332.89); top: calc(var(--px) * 128.16); width: calc(var(--px) * 66.98); }
  .ev-2 .event-text { left: calc(var(--px) * 266.55); }
  .ev-3::before { left: calc(var(--px) * 548.2); } .ev-3 .event-icon { left: calc(var(--px) * 518.99); top: calc(var(--px) * 128.56); width: calc(var(--px) * 61.1); }
  .ev-3 .event-text { left: calc(var(--px) * 447.6); }
  .ev-4::before { left: calc(var(--px) * 729.8); } .ev-4 .event-icon { left: calc(var(--px) * 691.19); top: calc(var(--px) * 121.34); width: calc(var(--px) * 77.23); }
  .ev-4 .event-text { left: calc(var(--px) * 630.3); }
  .ev-5::before { left: calc(var(--px) * 911.4); } .ev-5 .event-icon { left: calc(var(--px) * 881.74); top: calc(var(--px) * 121.34); width: calc(var(--px) * 59.33); }
  .ev-5 .event-text { left: calc(var(--px) * 812.4); }
  .ev-6::before { left: calc(var(--px) * 1093); } .ev-6 .event-icon { left: calc(var(--px) * 1055.05); top: calc(var(--px) * 123.76); width: calc(var(--px) * 77.92); }
  .ev-6 .event-text { left: calc(var(--px) * 996.65); }

  /* ----- RSVP (section height 573.03) ----- */
  .rsvp { height: calc(var(--px) * 573.03); }
  .rsvp .section-title { top: calc(var(--px) * 39.94); font-size: calc(var(--px) * 47.3); line-height: calc(var(--px) * 56.76); }
  .rsvp .rsvp-by { top: calc(var(--px) * 107.11); font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); }
  .rsvp .rsvp-form { position: absolute; inset: 0; max-width: none; margin: 0; }
  .rsvp .choices { display: block; position: static; margin: 0; }
  .choice { position: static; display: block; min-width: 0; }
  .choice-mark {
    position: absolute; left: calc(var(--px) * 500.2); width: calc(var(--px) * 19.7); height: calc(var(--px) * 19.7);
  }
  .choice-1 .choice-mark { top: calc(var(--px) * 156.72); }
  .choice-2 .choice-mark { top: calc(var(--px) * 195.72); }
  .choice-mark::after { inset: calc(var(--px) * 3.5); }
  .choice-text {
    position: absolute; left: calc(var(--px) * 535.2); font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24);
    white-space: nowrap; text-align: left;
  }
  .choice-1 .choice-text { top: calc(var(--px) * 157.71); }
  .choice-2 .choice-text { top: calc(var(--px) * 197.71); }

  .field { position: absolute; margin: 0; width: auto; font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24); padding-left: calc(var(--px) * 18.4); padding-right: calc(var(--px) * 18); }
  .field-name {
    left: calc(var(--px) * 359.56); width: calc(var(--px) * 560.88); top: calc(var(--px) * 252.72);
    height: calc(var(--px) * 39.89); padding-top: calc(var(--px) * 0.70); padding-bottom: 0;
  }
  .field-comments {
    left: calc(var(--px) * 359.2); width: calc(var(--px) * 560.9); top: calc(var(--px) * 312.81);
    height: calc(var(--px) * 95.3); min-height: 0; padding-top: calc(var(--px) * 8.00); padding-bottom: 0;
  }
  .rsvp-button {
    position: absolute; left: calc(var(--px) * 585); width: calc(var(--px) * 110); height: calc(var(--px) * 31.6);
    top: calc(var(--px) * 433.71); margin: 0; padding: calc(var(--px) * 3) 0 0 .3em;
    font-size: calc(var(--px) * 14); line-height: calc(var(--px) * 24);
  }
  .form-error { position: absolute; left: 0; right: 0; top: calc(var(--px) * 453.80); margin: 0; font-size: calc(var(--px) * 14); }
  .rsvp .thanks { position: absolute; left: 0; right: 0; top: calc(var(--px) * 148.80); margin: 0; }
  .thanks-title { font-size: calc(var(--px) * 30); line-height: calc(var(--px) * 36); }
  .thanks-text { margin-top: calc(var(--px) * 16.80); font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); }
  .rsvp .closing { top: calc(var(--px) * 503.91); font-size: calc(var(--px) * 16); line-height: calc(var(--px) * 24); margin: 0; }
}

@media (min-width: 1280px) {
  /* design is 1280 wide: never scale above 1:1 */
  .page { box-shadow: none; }
}