/* =========================================================
   Jade Valley v6.15 — Letters From Jade responsive full bleed

   The approved 1536 × 1024 correspondence-room artwork remains
   unchanged inside every desktop composition. New painted edge
   scenery supplies the extra canvas needed by 4:3, 16:10, 16:9,
   and ultrawide displays, so the browser can fill the viewport
   without cutting into the original artwork or misaligning the
   live HTML form controls.
   ========================================================= */

@media (min-width: 861px) {
  body.letters-v67 {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #132a1c !important;
  }

  body.letters-v67 .letters-room {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #132a1c !important;
  }

  body.letters-v67 .letters-stage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    width: max(100vw, calc(100dvh * 1.599609375)) !important;
    height: max(100dvh, calc(100vw / 1.599609375)) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1638 / 1024 !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: #132a1c !important;
  }

  body.letters-v67 .letters-room-picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.letters-v67 .letters-room-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    object-position: center !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /* 16:10 coordinate canvas. The original 3:2 artwork begins
     51px into the 1638px-wide responsive image. */
  body.letters-v67 .letters-art-form {
    position: absolute !important;
    inset: auto !important;
    left: 3.113553114% !important;
    top: 0 !important;
    z-index: 12 !important;
    width: 93.772893773% !important;
    height: 100% !important;
  }
}

/* 4:3 and similarly compact desktop windows. The original art is
   centered between two 64px painted horizontal extensions. */
@media (min-width: 861px) and (max-aspect-ratio: 3 / 2) {
  body.letters-v67 .letters-stage {
    width: max(100vw, calc(100dvh * 1.333333333)) !important;
    height: max(100dvh, calc(100vw / 1.333333333)) !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.letters-v67 .letters-art-form {
    left: 0 !important;
    top: 5.555555556% !important;
    width: 100% !important;
    height: 88.888888889% !important;
  }
}

/* 16:9 through ultrawide screens. The selected 2458 × 1024 image
   contains the original art at x=461..1997. On ordinary 16:9 and
   16:10 screens, only the newly painted side scenery is cropped. */
@media (min-width: 861px) and (min-aspect-ratio: 8 / 5) {
  body.letters-v67 .letters-stage {
    width: max(100vw, calc(100dvh * 2.400390625)) !important;
    height: max(100dvh, calc(100vw / 2.400390625)) !important;
    aspect-ratio: 2458 / 1024 !important;
  }

  body.letters-v67 .letters-art-form {
    left: 18.755085435% !important;
    top: 0 !important;
    width: 62.489829129% !important;
    height: 100% !important;
  }
}

/* Mobile keeps the existing accessible slide-up HTML form, while a
   dedicated vertical crop fills the visible room behind the button. */
@media (max-width: 860px) {
  body.letters-v67 .letters-stage {
    background-image: url('web/letters-mobile-v627.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  body.letters-v67 .letters-room-picture,
  body.letters-v67 .letters-room-art {
    display: none !important;
  }
}

@supports not (height: 100dvh) {
  @media (min-width: 861px) {
    body.letters-v67,
    body.letters-v67 .letters-room {
      height: 100vh !important;
      min-height: 100vh !important;
    }

    body.letters-v67 .letters-stage {
      width: max(100vw, calc(100vh * 1.599609375)) !important;
      height: max(100vh, calc(100vw / 1.599609375)) !important;
    }
  }

  @media (min-width: 861px) and (max-aspect-ratio: 3 / 2) {
    body.letters-v67 .letters-stage {
      width: max(100vw, calc(100vh * 1.333333333)) !important;
      height: max(100vh, calc(100vw / 1.333333333)) !important;
    }
  }

  @media (min-width: 861px) and (min-aspect-ratio: 8 / 5) {
    body.letters-v67 .letters-stage {
      width: max(100vw, calc(100vh * 2.400390625)) !important;
      height: max(100vh, calc(100vw / 2.400390625)) !important;
    }
  }
}

/* Quiet mobile title plaque and collision-safe controls. */
.letters-mobile-banner{display:none}
@media (max-width:860px){
  body.letters-v67 .letters-mobile-banner{
    position:absolute;
    z-index:18;
    top:max(14px,env(safe-area-inset-top));
    left:82px;
    right:14px;
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:7px 12px 6px;
    border:1px solid rgba(182,150,87,.42);
    border-radius:13px;
    background:linear-gradient(180deg,rgba(255,250,236,.96),rgba(239,220,180,.95));
    box-shadow:0 10px 24px rgba(24,27,18,.22),inset 0 0 0 1px rgba(255,255,255,.32);
    color:#294b35;
    text-align:center;
    pointer-events:none;
  }
  body.letters-v67 .letters-mobile-banner strong{
    font:500 22px/1.02 Georgia,"Times New Roman",serif;
    letter-spacing:.01em;
  }
  body.letters-v67 .letters-mobile-banner small{
    margin-top:3px;
    color:#846c45;
    font:700 8px/1 Georgia,"Times New Roman",serif;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  body.letters-v67 .mobile-mailbox-button{
    bottom:max(82px,calc(72px + env(safe-area-inset-bottom))) !important;
  }
  body.letters-v67 .letters-art-form.mobile-open{
    z-index:320 !important;
  }
  body.letters-form-open .mobile-mailbox-button,
  body.letters-form-open .jade-explore-toggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}
@media (max-width:360px){
  body.letters-v67 .letters-mobile-banner{left:76px;right:8px}
  body.letters-v67 .letters-mobile-banner strong{font-size:19px}
}