/* The invitation. Tokens and parts come from house.css; this file only lays them out. Pages are light only. */
html { color-scheme: light; }
body { margin: 0; background: var(--ivory); }

.inv { margin-inline: auto; }

/* the invitation: a normal one, in the frame. Its type is sized to the frame, so it fits at any screen size. */
.card { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); overflow: hidden; text-align: center; }
.card p { margin: 0; }
.frame { position: relative; width: min(108vw, max(calc((100svh - 160px) * .7467), 380px), 640px); container-type: inline-size; }
.frame img { display: block; width: 100%; height: auto; }
.inside { position: absolute; inset: 19.5% 23.5% 20.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; }
.inside .bh-names { font-size: 4cqw; letter-spacing: .24em; padding-left: .24em; }
.inside .line { font-size: 4.7cqw; line-height: 1.25; }
.inside .name { font-style: italic; font-size: 7.8cqw; line-height: 1.12; padding: 0 2cqw 1.2cqw; border-bottom: var(--stroke-fine) solid var(--gold-leaf); text-wrap: balance; }
.inside .when { font-size: 4.3cqw; line-height: 1.38; margin-top: 2.4cqw; }
.hero-go { display: grid; justify-items: center; gap: var(--space-2); }
.card .bh-btn { background: transparent; color: var(--on-green); border-color: var(--gold-leaf); font-size: 12.5px; padding: 16px 26px 15px 30px; }
.card .bh-btn.is-text { border-color: transparent; border-bottom-color: var(--gold-leaf); font-size: 16px; padding: 6px 0 4px; }

.note { max-width: 560px; margin-inline: auto; padding: var(--space-12) var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }
.note .bh-greeting { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.12; }

/* the plain facts, scanned at a glance */
.details { width: calc(min(560px, 100%) - 2 * var(--space-6)); margin-inline: auto; padding-bottom: var(--space-8); display: grid; gap: var(--space-6); }
.facts { margin: 0; display: grid; }
.facts > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; padding: 11px 0; border-top: var(--stroke-hair) solid var(--line); }
.facts > div:last-child { border-bottom: var(--stroke-hair) solid var(--line); }
.facts dt { margin: 0; }
.facts dd { margin: 0; font-size: 18px; line-height: 1.38; }
.parking { display: grid; gap: var(--space-2); }
.parking svg { display: block; width: 100%; height: auto; }
.details .sign { justify-self: center; margin: 0; }

.reply { width: calc(min(560px, 100%) - 2 * var(--space-6)); margin-inline: auto; padding: var(--space-8) 0 var(--space-16); border-top: var(--stroke-hair) solid var(--line); display: grid; gap: var(--space-4); }
.reply .step { display: grid; gap: var(--space-4); margin: 0; border: 0; padding: 0; }
.reply .step[hidden], .reply [hidden] { display: none; }
.reply .rsvp-sub { margin-top: calc(-1 * var(--space-3)); }
.reply p { margin: 0; }
.reply .choices { display: grid; gap: var(--space-2); }
.reply .bh-btn:not(.is-text) { width: 100%; font-size: 12.5px; padding: 17px 16px 16px; }
.reply .bh-btn[disabled] { background: transparent; color: var(--soft); border-color: var(--line); }
.reply .bh-btn[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); }
.reply .bh-btn.is-text { justify-self: start; }
.reply .bh-input { font-size: 18px; }
.reply .oops { color: var(--alert); }

/* the games page */
.games { width: calc(min(560px, 100%) - 2 * var(--space-6)); margin-inline: auto; padding: var(--space-8) 0 var(--space-16); display: grid; gap: var(--space-6); }
.game-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: var(--stroke-hair) solid var(--line); }
.game-row .bh-btn { font-size: 11px; padding: 11px 12px 10px; white-space: nowrap; }
.game-row .bh-btn[disabled] { background: transparent; color: var(--soft); border-color: var(--line); }
.games p { margin: 0; }
.games .oops { color: var(--alert); }
.games .oops[hidden] { display: none; }

/* the holding page */
.home { min-height: 100svh; display: grid; place-items: center; }