/* One continuous ivory-paper card with a fixed ornate gold border */
.page {
  position: relative;
  min-height: 100vh;
  background: #f4eee2 url("../assets/paper/paper.webp") repeat;
  background-size: 640px;
}

.page { --frame: clamp(10px, 2.2vmin, 26px); }

.page__border {
  position: fixed;
  inset: var(--frame);
  border: 3px solid var(--gold-line);
  pointer-events: none;
  z-index: 9;
}

.page__border::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gold-line);
}

.page__corner {
  position: absolute;
  width: clamp(110px, 21vmin, 230px);
  top: -8px;
  transform-origin: top left;
}

.page__corner--tl { left: -8px; }
.page__corner--tr { right: -8px; transform-origin: top right; }

/* Border draws in and corners bloom (driven by js/welcome.js) */
.page__border.is-hidden { clip-path: inset(50% 50% 50% 50%); }

/* Every section fills exactly one screen; content is sized to fit inside it */
.page > section {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Solid paper strips from the screen edge to the inner gold line (frame + 8px), fixed above all content */
.page__mask { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.page__mask span {
  position: absolute;
  background: #f4eee2 url("../assets/paper/paper.webp") repeat fixed;
  background-size: 640px;
}
.page__mask span:nth-child(1) { left: 0; right: 0; top: 0; height: calc(var(--frame) + 8px); }
.page__mask span:nth-child(2) { left: 0; right: 0; bottom: 0; height: calc(var(--frame) + 8px); }
.page__mask span:nth-child(3) { top: 0; bottom: 0; left: 0; width: calc(var(--frame) + 8px); }
.page__mask span:nth-child(4) { top: 0; bottom: 0; right: 0; width: calc(var(--frame) + 8px); }

/* each section is its own layer, always beneath the frame */
.page > section { position: relative; z-index: 1; }

/* ---------- a section whose content doesn't fit this screen grows instead of clipping (js/layout.js) ---------- */
.page > section.is-tall { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
.welcome.is-tall { grid-template-rows: auto auto auto; }
.welcome.is-tall .welcome__couple { height: clamp(150px, 30svh, 300px); }
.events.is-tall .events__body { min-height: 0; height: auto; }
.events.is-tall .events__stack { max-height: none; height: auto; width: min(calc(100vw - 96px), 340px); min-height: 520px; }
.rsvp.is-tall .rsvp__card { max-height: none; overflow: visible; }
@media (min-aspect-ratio: 1/1) {
  .welcome.is-tall { grid-template-rows: auto auto; }
  .welcome.is-tall .welcome__couple { height: clamp(220px, 80svh, 420px); }
}

/* phones held sideways: smaller garland space at the top of the first page, and wider event cards */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .welcome { padding-top: calc(17svh + 30px); }
  .events.is-tall .events__stack { width: min(calc(100vw - 140px), 620px); }
}