/* Readable input text also covers larger touch devices. */
.fields input{font-size:max(16px,2.72cqw)}
/* Lift the title and registration together.
   The lowest bird circle ends at about 27.4% of the poster height. */
.invitation{--registration-lift:calc(1.42cqw + var(--event-heading-size) * .54)}
.invitation>h1,.rsvp-heading,#form{transform:translateY(calc(-1 * var(--registration-lift)))}
/* Keep event information close to the raised form, with room for feedback when shown. */
.response-note{min-height:0;margin:0}
.response-note:has(#success:not([hidden])){margin-top:.7cqw}
.event-details{transform:translateY(calc(-1 * var(--registration-lift)));margin:0;padding-top:1.6cqw}
.date{margin-bottom:1cqw}
/* Keep phone input text large enough to avoid focus zoom, without changing the artwork. */
@media (max-width:600px), (pointer:coarse) and (max-height:600px){
 .flier{--event-heading-size:4.3cqw;--venue-font-size:3.1cqw;width:min(100vw,max(320px,calc(var(--page-height,100svh) * 941 / 1672)))}
 .invitation{--registration-lift:calc(1.42cqw + var(--event-heading-size) * .6)}
 .invitation h1{font-size:var(--event-heading-size);line-height:1.2;letter-spacing:.12cqw;white-space:nowrap}
 /* The single-line phone title needs a little clearance from the right-hand circle. */
 .invitation>h1{transform:translateY(calc(var(--event-heading-size) * .45 - var(--registration-lift)))}
 .invitation h1 span{display:inline}.invitation h1 span+span::before{content:' '}
 .rsvp-heading{font-size:9.7cqw;margin:.6cqw 0 1cqw}
 .fields{gap:6px 2.2cqw}
 .fields label{font-size:max(10px,2.21cqw);line-height:1.2;margin:0 0 3px}
 .fields input{font-size:max(16px,2.72cqw);height:max(32px,5.31cqw);line-height:1.2;padding:4px 6px;scroll-margin-block:24px}
 .submit{font-size:max(16px,2.72cqw);height:max(40px,5.31cqw);margin:6px 0 0}
 #success{font-size:max(9px,1.87cqw);line-height:1.25}
 .date{font-size:var(--event-heading-size)}.place{font-size:var(--venue-font-size);white-space:nowrap}.address{font-size:var(--venue-font-size);margin:1cqw 0 0}
 .manage-wrap a{font-size:max(10px,1.8cqw);display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px}
 .rsvp-dialog{max-height:calc(100dvh - 24px);padding:24px}
 .rsvp-dialog button{min-height:44px;font-size:16px}.rsvp-dialog .dialog-x{min-width:44px}
 .rsvp-dialog input[type=number]{font-size:18px}
}
@media (max-width:600px), (pointer:coarse) and (max-height:600px){
 @container (max-width:350px){
 .fields{gap:4px 2.2cqw}.fields input{height:30px}.submit{height:36px;margin-top:4px}
 .rsvp-heading{font-size:9.3cqw}
 }
}

.details-link{margin:.5cqw 0 0;font-family:Arial,sans-serif;font-size:2.72cqw;font-weight:600;letter-spacing:.12cqw}
.details-link a{--button-height:5.31cqw;width:100%}
@media (max-width:600px), (pointer:coarse) and (max-height:600px){
 .details-link{font-size:max(16px,2.72cqw)}
 .details-link a{--button-height:max(40px,5.31cqw)}
 @container (max-width:350px){.details-link a{--button-height:36px}}
}