/* The visitor site stays a portrait composition at every viewport width. */
body { background: #15120f; }
/* A narrow landscape phone gets the same centered room as a wide desktop. */
.atmosphere {
  right: auto;
  left: 50%;
  width: min(100vw, 390px);
  transform: translateX(-50%);
  background-position: center;
}
body:not([data-view="inbox"]) .app-shell {
  width: min(100vw, 390px);
  max-width: 390px;
}
body[data-view="inbox"] .app-shell { width: min(100vw, 390px) !important; max-width: 390px !important; margin-inline: auto !important; }
#inbox-view.is-active { width: min(100vw, 390px) !important; }

@media (min-width: 768px) {
  body:not([data-view="inbox"]) .app-shell {
    padding: 0 20px 22px;
  }
  .topbar { height: 68px; }
  .brand { gap: 9px; font-size: 14px; }
  .brand-symbol { width: 31px; height: 36px; padding-right: 9px; font-size: 28px; }
  .brand small { font-size: 8px; }
  .header-note { font-size: 9px; }

  .entry-layout {
    display: flex;
    min-height: calc(100dvh - 82px);
    flex-direction: column;
    padding: 8px 0 26px;
  }
  .entry-copy { grid-column: auto; grid-row: auto; align-self: auto; text-align: center; }
  .entry-copy h1 { margin: 9px 0 7px; font-size: 30px; }
  .entry-copy > p:last-child { margin: auto; font-size: 11px; }
  .entry-art {
    order: 2;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    width: min(100%, 330px);
    margin: 0 auto;
    padding: 30px 24px 44px;
  }
  .keepsake { top: -2%; right: 2%; width: 29%; }
  .preview-instruction { bottom: 24px; font-size: 9px; }
  .art-caption { font-size: 9px; }
  .entry-controls {
    order: 3;
    grid-column: auto;
    grid-row: auto;
    max-width: 420px;
    margin: 12px auto 0;
    padding: 22px 24px 24px;
  }
  .panel-title { font-size: 20px; }
  .panel-copy { margin-bottom: 13px; }
  .entry-switch { margin-bottom: 13px; }
  .entry-form input, .primary-btn { min-height: 50px; }
  .entry-note { display: none; }
  .form-message { min-height: 20px; padding-top: 4px; }

  .opening-toolbar { height: 66px; }
  .opening-intro { margin-top: 20px; }
  .opening-intro h1 { font-size: 27px; }
  .envelope-space { padding: 92px 0 43px; }
  .envelope-stage { width: 100%; max-width: 380px; }
  .reader-head { height: 66px; }
  .reader-intro { padding-bottom: 22px; }
  .reader-intro h1 { font-size: 23px; }
  .letter-reader { width: calc(100% + 16px); margin-left: -8px; }
}

@media (orientation: landscape) and (max-height: 767px) {
  html:has(body[data-view="inbox"]), body[data-view="inbox"] {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body[data-view="inbox"] .app-shell { min-height: 844px !important; }
  #inbox-view.is-active {
    position: relative !important;
    inset: auto !important;
    height: 844px !important;
    min-height: 844px !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
  #inbox-view .minimal-copy { bottom: 304px; }
}

@media (min-width: 768px) and (max-height: 720px) {
  .topbar { height: 58px; }
  .entry-layout { min-height: calc(100dvh - 68px); padding-top: 2px; }
  .entry-copy h1 { font-size: 25px; }
  .entry-copy .eyebrow { display: none; }
  .entry-art { width: min(100%, 260px); padding-top: 20px; padding-bottom: 34px; }
  .preview-instruction { display: none; }
  .entry-controls { margin-top: 7px; padding-top: 3px; padding-bottom: 6px; }
  .panel-copy, .entry-switch { margin-bottom: 9px; }
  .entry-switch button { min-height: 36px; padding-top: 5px; padding-bottom: 8px; }
  .entry-form input, .primary-btn { min-height: 46px; }
  .opening-toolbar { height: 54px; }
  .opening-intro { margin-top: 0; }
  .opening-intro h1 { margin: 6px 0; font-size: 22px; }
  .envelope-space { padding-top: 58px; padding-bottom: 23px; }
  .envelope-stage { max-width: 300px; }
}