* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* averaged from bg.png's own edge pixels, so the letterbox bars blend
     into the invitation's cream paper texture instead of framing it */
  background: #e3dcd1;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
}

/*
  The frame is sized to the exact 1080:1920 ratio of bg.png and scaled to
  fit entirely inside the viewport (never cropped). Cropping would break
  the invisible buttons below, since they're pinned to the image by
  percentage and must always land on the button graphics baked into it.

  Only width is given a definite value; height is left to `aspect-ratio`
  so it is always *derived* from width, not fought over with it (a
  calc()/min() that tried to express "height from width" using height's
  own percentage basis was the earlier bug -- percentages in `height`
  can only ever resolve against the container's height, never its width).
  max-width caps width at whatever value keeps height <= 100dvh, i.e.
  the frame's height is always the PNG's natural height at that width,
  and never taller than the viewport -- so the buttons baked into the
  image are always exactly where the hotspot percentages expect them.

  Pinned with top:0 (not flex/align-items) so it is always anchored to
  the top of the viewport, never vertically centered, and only centered
  horizontally via left:50%/translateX.
*/
.frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(100vh * 1080 / 1920); /* fallback for no-dvh */
  max-width: calc(100dvh * 1080 / 1920);
  aspect-ratio: 1080 / 1920;
}

.bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center; /* belt-and-suspenders: if any rounding gap remains, it collects at the bottom, never the top */
  user-select: none;
  -webkit-user-drag: none;
}

/* Invisible hotspots pinned to the button graphics baked into bg.png.
   Positions are percentages of the frame, so they stay aligned at any scale. */
.hotspot {
  position: absolute;
  left: 20.6%;
  width: 58%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 4px;
}

.hotspot--photo {
  top: 72.4%;
  height: 6.9%;
}

.hotspot--message {
  top: 80.3%;
  height: 6.9%;
}

/* ---------------------------------------------------------------------
   Modal — upload / guestbook forms
   --------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(40, 32, 24, 0.55);
  backdrop-filter: blur(2px);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  background: #f7f2e9;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 2rem 1.75rem 1.75rem;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: #3a3128;
}

.modal-panel[hidden] {
  display: none;
}

.modal-panel h2 {
  font-family: 'Great Vibes', cursive;
  font-size: 2.25rem;
  font-weight: 400;
  margin: 0 0 1rem;
  text-align: center;
  color: #5b4636;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  border: 0;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: #8a7c6c;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.modal-close:hover {
  color: #3a3128;
}

.modal-panel form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: #5b4636;
}

.modal-panel input[type="text"],
.modal-panel textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #d8cbb6;
  border-radius: 10px;
  background: #fffdf9;
  color: #3a3128;
  resize: vertical;
}

.modal-panel input[type="text"]:focus,
.modal-panel textarea:focus {
  outline: 2px solid #b79c78;
  outline-offset: 1px;
}

.file-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

label.file-picker__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 1rem;
  border: 2px dashed #b79c78;
  border-radius: 14px;
  background: #fffdf9;
  color: #8a6d4c;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.file-picker__button:hover {
  background: #f3ead9;
  border-color: #8a6d4c;
}

.file-picker__input:focus-visible + .file-picker__button {
  outline: 2px solid #b79c78;
  outline-offset: 2px;
}

.file-picker__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.file-picker__selected {
  min-height: 1.1rem;
  font-size: 0.82rem;
  color: #5b4636;
  text-align: center;
}

.modal-submit {
  margin-top: 0.25rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 10px;
  background: #8a6d4c;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.modal-submit:hover {
  background: #745a3d;
}

.modal-submit:disabled {
  background: #b8a894;
  cursor: not-allowed;
}

.modal-status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: #5b4636;
  text-align: center;
}

.modal-status.is-error {
  color: #a83232;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 1.4rem;
  border-radius: 999px;
  background: #e7ddc9;
  border: 1px solid #d8cbb6;
  overflow: hidden;
}

.progress-bar[hidden] {
  display: none;
}

.progress-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #b79c78, #8a6d4c);
  transition: width 0.15s ease;
  border-radius: 999px;
}

.progress-bar__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3a3128;
}