/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper-w: 850;   /* pseudo 8.5x11 for consistent scaling */
  --paper-h: 1100;
  --ink: #2a2727;
  --ink-light: rgba(42,39,39,.9);
  --accent: #4b3a2f;
  --shadow: rgba(0,0,0,.18);
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

/* Page background */
body {
 
  font-family: var(--font-serif);
  background: #f4efe8;
  color: var(--ink);
  min-height: 100vh;
  display: grid;
  place-items: top;
  padding: 24px;
  padding-top:35px;
}

/* Flyer container keeps aspect ratio and scales responsively */
.flyer {
  positionx: relative;
  width: min(100%, 900px);
  aspect-ratio: 8.5 / 11;
  background: center / cover no-repeat;
  border: 8px solid #f3e6d4;
  box-shadow: 0 12px 28px var(--shadow);
  overflow: hidden;
}

/* Text block helpers */
.block {
  position: absolute;
  width: 86%;
  left: 7%;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.top-heading {
  top: 5.5%;
  font-weight: 900;
  font-size: clamp(14px, 2.2vw, 26px);
  letter-spacing: .04em;
  line-height: 1.15;
}

.small-title {
  top: 17.5%;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
}

.big-title {
  top: 21.5%;
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 112px);
  letter-spacing: .02em;
  color: #2a1f1a;
  text-shadow: 0 3px 0 #f1d1ac, 0 6px 18px rgba(0,0,0,.25);
}

.subtitle {
  top: 36.5%;
  width: 90%;
  left: 5%;
  font-size: clamp(14px, 2.2vw, 22px);
  line-height: 1.25;
  font-weight: 800;
}

.date {
  top: 53.5%;
  font-size: clamp(26px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: .02em;
}

.raindate {
  top: 59.5%;
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 800;
}

.time {
  top: 66%;
  font-size: clamp(40px, 8vw, 92px);
  font-weight: 1000;
}

.address {
  top: 77%;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.25;
  font-weight: 700;
}

.footer-top {
  bottom: 9.5%;
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 900;
}

.rsvp {
  bottom: 4.5%;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 1000;
}

.rsvp span.site {
  display: block;
  font-size: clamp(18px, 3vw, 26px);
  margin-top: 4px;
}