/* Responsive guest layout. The original editor coordinates remain in index.html. */
@font-face { font-family:'Invitation Ethiopic'; src:url('../fonts/InvitationEthiopic-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Invitation Ethiopic'; src:url('../fonts/InvitationEthiopic-Semibold.ttf') format('truetype'); font-weight:500 900; font-display:swap; }
html.public-export:not(.editor-preview) { --ui-font:'Avenir Next','Invitation Ethiopic',system-ui,sans-serif; }
html.public-export:not(.editor-preview), html.public-export:not(.editor-preview) body { height:100%!important; min-height:100%!important; overflow:hidden!important; }
html.public-export:not(.editor-preview) .stage { display:block!important; height:100dvh!important; min-height:100dvh!important; overflow:auto!important; background:#e2e7d6; }
html.public-export:not(.editor-preview) #scaled { width:100%!important; height:auto!important; min-width:0; min-height:100%; transform:none!important; top:0!important; margin:0!important; }
html.public-export:not(.editor-preview) .canvas { position:relative; width:100%; height:auto; min-height:100dvh; overflow:hidden; background:#e2e7d6; }
html.public-export:not(.editor-preview) .background-wrap { position:absolute; inset:0; clip-path:none!important; border-radius:0!important; }
html.public-export:not(.editor-preview) .background-wrap img { width:100%; height:100%; object-fit:fill!important; transform:none!important; filter:none!important; animation:none!important; }
html.public-export:not(.editor-preview) #content { position:relative; inset:auto; min-height:100dvh; width:min(100%,620px); margin:auto; padding:clamp(160px,25svh,260px) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)); display:flex; justify-content:center; font-size:15px; color:#3f4e33; }
html.public-export:not(.editor-preview) .tabs-root { width:100%; }
html.public-export:not(.editor-preview) .content-panel { display:flex; gap:clamp(8px,1svh,12px); width:100%; }
html.public-export:not(.editor-preview) #content .layout-block,
html.public-export:not(.editor-preview) #content [data-text-key] { transform:none!important; translate:none!important; rotate:none!important; scale:none!important; width:auto!important; height:auto!important; min-height:0!important; max-width:100%; position:relative; inset:auto; margin:0; will-change:auto; }
html.public-export:not(.editor-preview) #content [data-text-key] { font-size:inherit!important; line-height:inherit!important; letter-spacing:normal!important; -webkit-text-stroke:0!important; text-shadow:none!important; white-space:normal!important; }
html.public-export:not(.editor-preview) #content .block-language { position:absolute!important; top:max(12px,env(safe-area-inset-top))!important; left:50%!important; transform:translateX(-50%)!important; width:min(310px,calc(100% - 32px))!important; padding:0!important; border:0!important; background:none!important; backdrop-filter:none!important; z-index:30; }
html.public-export:not(.editor-preview) .language-shell { width:100%; padding:4px!important; border-radius:14px!important; }
html.public-export:not(.editor-preview) .language-labels { display:none; }
html.public-export:not(.editor-preview) .language-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:100%; }
html.public-export:not(.editor-preview) .language-tab { min-height:40px!important; font:500 13px/1.3 var(--ui-font)!important; padding:8px!important; }
html.public-export:not(.editor-preview) .language-tab[lang=ti] { font-family:'Invitation Ethiopic',sans-serif!important; }
html.public-export:not(.editor-preview) #content .block-families { order:0!important; font-size:12px; color:#566346; }
html.public-export:not(.editor-preview) #content .names { order:1!important; display:flex; flex-direction:column; gap:4px; padding:0!important; line-height:1.12; }
html.public-export:not(.editor-preview) #content .names .name-heading { margin:0; padding:0; transform:none!important; font-size:clamp(33px,8.6vw,56px); line-height:1.14; }
html.public-export:not(.editor-preview) #content .names .ampersand { order:0; font-size:16px!important; line-height:1.3!important; color:#828b65; }
html.public-export:not(.editor-preview) #content .name-bride { order:-1; }
html.public-export:not(.editor-preview) #content .names::before,
html.public-export:not(.editor-preview) #content .names::after,
html.public-export:not(.editor-preview) #content .name-wrap::before,
html.public-export:not(.editor-preview) #content .name-wrap::after { display:none; }
html.public-export:not(.editor-preview) .block-invitation { order:2!important; font-size:16px; line-height:1.5; }
html.public-export:not(.editor-preview) .block-ceremony { order:3!important; font-size:13px; line-height:1.5; }
html.public-export:not(.editor-preview) .block-date { order:4!important; }
html.public-export:not(.editor-preview) .date-runway { width:100%; max-width:390px; margin:auto; padding:7px 8px; font-size:13px; line-height:1.5; }
html.public-export:not(.editor-preview) #content .date-number { font-size:36px!important; font-family:Georgia,serif!important; }
html.public-export:not(.editor-preview) [data-layout-block=venue] { order:5!important; font-size:13px; line-height:1.5; }
html.public-export:not(.editor-preview) .venue-map-pin { display:flex; flex-direction:column; align-items:center; gap:1px; margin:0 auto; }
html.public-export:not(.editor-preview) .map-icon { order:-2; width:26px; height:28px; margin:0 auto 3px; }
html.public-export:not(.editor-preview) .map-icon svg { width:100%; height:100%; }
html.public-export:not(.editor-preview) [data-text-key=venueAddress] { order:-1; }
html.public-export:not(.editor-preview) [data-layout-block=adultsOnly] { display:none; }
html.public-export:not(.editor-preview) #content .rsvp-panel { order:6!important; padding:12px!important; border-radius:18px!important; width:100%!important; font-family:var(--ui-font); }
html.public-export:not(.editor-preview) .rsvp-panel::before,
html.public-export:not(.editor-preview) .rsvp-panel::after { display:none; }
html.public-export:not(.editor-preview) .rsvp-panel form { display:flex; flex-direction:column; gap:8px; }
html.public-export:not(.editor-preview) .rsvp-panel form > * { order:0!important; }
html.public-export:not(.editor-preview) .date-runway-center { height:58px; min-height:0; }
html.public-export:not(.editor-preview) .canvas { border-radius:0!important; }
html.public-export:not(.editor-preview) .rsvp-title-block { line-height:1.5; font-size:12px; }
html.public-export:not(.editor-preview) .rsvp-title { font-family:var(--ui-font)!important; text-transform:none!important; }
html.public-export:not(.editor-preview) .rsvp-grid { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:8px; margin:0; }
html.public-export:not(.editor-preview) #content .rsvp-input { display:block; width:100%!important; height:44px!important; min-height:44px!important; font:500 16px/1.4 var(--ui-font)!important; padding:8px!important; text-align:center; backdrop-filter:none!important; }
html.public-export:not(.editor-preview) #content .rsvp-input::placeholder { font:inherit!important; color:#4c5940!important; opacity:1; }
html.public-export:not(.editor-preview) .rsvp-radio { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; }
html.public-export:not(.editor-preview) .rsvp-radio label { display:flex!important; justify-content:center; width:100%; min-height:40px; font:500 12px/1.35 var(--ui-font); padding:5px; cursor:pointer; }
html.public-export:not(.editor-preview) .rsvp-radio span { padding:0!important; background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; font-family:inherit!important; text-transform:none!important; color:#3f4e33!important; }
html.public-export:not(.editor-preview) .rsvp-radio input { width:16px; height:16px; margin:0 3px 0 0; flex:0 0 16px; }
html.public-export:not(.editor-preview) #content .rsvp-submit { width:100%!important; min-height:44px!important; font:600 14px/1.4 var(--ui-font)!important; text-transform:none!important; padding:8px!important; }
html.public-export:not(.editor-preview) .rsvp-note-block { font-size:11px; line-height:1.4; }
html.public-export:not(.editor-preview) #content .respect-time { margin:0!important; }
html.public-export:not(.editor-preview)[lang=ti] #content [data-text-key],
html.public-export:not(.editor-preview)[lang=ti] #content .rsvp-input,
html.public-export:not(.editor-preview)[lang=ti] #content .rsvp-submit { font-family:'Invitation Ethiopic',sans-serif!important; font-style:normal!important; font-weight:400!important; }
html.public-export:not(.editor-preview)[lang=ti] #content .names .name-heading { font-size:clamp(26px,6.8vw,42px); line-height:1.45; }
html.public-export:not(.editor-preview)[lang=ti] #content .name-groom { order:-1; }
html.public-export:not(.editor-preview)[lang=ti] #content .name-bride { order:1; }
html.public-export:not(.editor-preview)[lang=ti] .block-invitation { font-size:16px; line-height:1.6; }
html.public-export:not(.editor-preview)[lang=ti] .block-ceremony { font-size:13px; line-height:1.65; }
html.public-export:not(.editor-preview)[lang=ti] #content .rsvp-input { font-weight:600!important; }
@media (min-width:700px) and (min-aspect-ratio:1/1) {
  html.public-export:not(.editor-preview) .background-wrap img { object-fit:cover!important; opacity:.65; }
  html.public-export:not(.editor-preview) #content { width:min(100%,1050px); padding:100px 40px 32px; }
  html.public-export:not(.editor-preview) .content-panel { display:grid; grid-template-columns:1fr 1fr; gap:18px 54px; align-items:center; }
  html.public-export:not(.editor-preview) .block-families { grid-column:1; grid-row:1; }
  html.public-export:not(.editor-preview) .names { grid-column:1; grid-row:2 / span 2; }
  html.public-export:not(.editor-preview) .block-invitation { grid-column:1; grid-row:4; }
  html.public-export:not(.editor-preview) .block-ceremony { grid-column:2; grid-row:1; }
  html.public-export:not(.editor-preview) .block-date { grid-column:2; grid-row:2; }
  html.public-export:not(.editor-preview) [data-layout-block=venue] { grid-column:2; grid-row:3; }
  html.public-export:not(.editor-preview) .rsvp-panel { grid-column:2; grid-row:4 / span 2; }
}
@media (max-height:740px) and (max-aspect-ratio:1/1) {
  html.public-export:not(.editor-preview) #content { padding-top:clamp(145px,24svh,178px); }
  html.public-export:not(.editor-preview) .content-panel { gap:8px; }
  html.public-export:not(.editor-preview) #content .names .name-heading { font-size:32px; }
  html.public-export:not(.editor-preview)[lang=ti] #content .names .name-heading { font-size:25px; }
}
html.public-export:not(.editor-preview) .rsvp-open { order:6; width:100%; min-height:46px; border:1px solid #738159; border-radius:13px; background:linear-gradient(120deg,#536142,#738159); color:#fffdf3; font:600 15px/1.4 var(--ui-font); padding:10px 16px; cursor:pointer; }
html.public-export:not(.editor-preview) .rsvp-sheet { border:1px solid #fff9; border-radius:22px 22px 0 0; padding:12px; width:min(560px,100%); max-width:100%; max-height:85dvh; margin:auto auto 0; background:#eef1e5; color:#3f4e33; overflow:auto; box-shadow:0 -12px 64px #17231133; }
html.public-export:not(.editor-preview) .rsvp-sheet::backdrop { background:#1f2b2266; backdrop-filter:blur(5px); }
html.public-export:not(.editor-preview) .rsvp-close { display:block; margin:0 0 8px auto; min-height:40px; padding:6px 12px; border:0; border-radius:10px; color:#3f4e33; background:#dce3d0; font:500 14px var(--ui-font); cursor:pointer; }
html.public-export:not(.editor-preview)[lang=ti] .rsvp-open,
html.public-export:not(.editor-preview)[lang=ti] .rsvp-close,
html.public-export:not(.editor-preview)[lang=ti] .rsvp-thank-you,
html.public-export:not(.editor-preview)[lang=ti] .rsvp-thank-you * { font-family:'Invitation Ethiopic',sans-serif!important; }
html.public-export:not(.editor-preview) .rsvp-thank-you { color:#3f4e33!important; }
html.public-export:not(.editor-preview) .rsvp-thank-you p { font-size:14px!important; line-height:1.6!important; }
/* The date and venue remain visible; omit their introductory sentence on
   very short portrait screens so the reply action stays above the fold. */
@media (max-width:699px) and (max-height:620px) {
  html.public-export:not(.editor-preview) .block-ceremony { display:none; }
}
@media (min-width:700px) and (max-height:600px) {
  html.public-export:not(.editor-preview) #content { padding:80px 30px 16px; }
  html.public-export:not(.editor-preview) .content-panel { gap:8px 30px; }
  html.public-export:not(.editor-preview) .rsvp-open { grid-column:2; grid-row:4; }
  html.public-export:not(.editor-preview) #content .names .name-heading { font-size:36px; }
  html.public-export:not(.editor-preview)[lang=ti] #content .names .name-heading { font-size:29px; }
}