/* Compact layouts for real phone viewports and embedded invitation previews. */
@media (max-width: 375px) {
  body[data-theme] #invitation main :is(h1, h2, h3) {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  body[data-theme] #invitation main > .section :is(h2, h3) {
    text-wrap: balance;
  }

  body:is([data-theme="arabian"], [data-theme="noor"], [data-theme="gul"], [data-theme="royal"], [data-theme="haveli"]):not([dir="rtl"])
  #invitation main > .section h2 {
    font-size: 29px;
    font-size: clamp(28px, 8.3vw, 31px);
  }

  body[data-theme]:not([dir="rtl"]) #invitation #story .moment h3 {
    font-size: 25px;
    font-size: clamp(25px, 7.5vw, 28px);
  }

  body[data-theme="noor"]:not([dir="rtl"]) #invitation .nj-event-card .nj-event-copy h3 {
    font-size: 29px;
    font-size: clamp(28px, 8.3vw, 31px);
  }
}

@media (max-width: 440px) and (max-height: 620px) {
  /* Leave room for Skip and keep the complete card above the bottom edge. */
  body.sealed #invitation .opening-overlay.op-essential {
    padding: 64px 16px 14px;
    overflow-y: auto;
  }

  #invitation .op-essential .es-welcome {
    min-height: 0;
    padding: 38px 19px 16px;
  }

  #invitation .op-essential .es-family { margin-bottom: 12px; }
  #invitation .op-essential .es-names {
    gap: 4px;
    font-size: 32px;
    font-size: clamp(30px, 9vw, 38px);
  }
  #invitation .op-essential .es-message { margin-top: 12px; }
  #invitation .op-essential .es-guest { margin-top: 10px; }
  #invitation .op-essential .es-rule { margin-block: 13px 9px; }
  #invitation .op-essential .es-date { margin-bottom: 10px; }
  #invitation .op-essential .es-open { margin-top: 10px; padding-block: 8px; }

  #invitation .ee-cover .ee-cover-content {
    min-height: 0;
    padding-block: 56px 14px;
  }

  #invitation .ee-cover .ee-crest {
    width: 76px;
    height: 76px;
    font-size: 26px;
  }

  #invitation .ee-cover .ee-kicker { margin: 17px 0 10px; }
  #invitation .ee-cover .ee-cover-names {
    font-size: 32px;
    font-size: clamp(30px, 9vw, 39px);
  }
  #invitation .ee-cover .ee-cover-names em { margin: 4px; }
  #invitation .ee-cover .ee-guest { margin: 12px 0 0; }
  #invitation .ee-cover .ee-enter { margin-top: 18px; }
  #invitation .ee-cover .ee-brand { margin-top: 14px; }
}