/* Independent transparent illustration, scenic backdrop, and flowing HTML form. */
#signup {
  --popup-gold: #f5d381;
  width: min(1200px, calc(100% - 24px)); max-width: none;
  max-height: calc(100dvh - 24px); padding: 0; margin: auto;
  overflow: hidden; color: #fff5df; background: #03172e;
  border: 2px solid #ebc371; border-radius: 16px;
  box-shadow: 0 24px 100px #0009, inset 0 0 0 3px #583c16;
  color-scheme: light;
}
#signup::backdrop { background: #020c18c9; backdrop-filter: blur(5px); }
#signup .close {
  position: absolute; z-index: 2; inset: 8px 8px auto auto;
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  background: #05233a; color: #ffe5a5;
  border: 2px solid var(--popup-gold); border-radius: 50%;
  font: 36px/1 Georgia, serif; box-shadow: 0 0 0 3px #062035;
}
.signup-scroll {
  max-height: calc(100dvh - 28px); overflow: auto;
  overscroll-behavior: contain; scroll-padding-block: 64px 16px;
  /* Keep touch, wheel, and keyboard access without a scrollbar over the art. */
  scrollbar-width: none;
}
.signup-scroll::-webkit-scrollbar { display: none; }
.signup-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 10px; padding: 26px 32px 26px 14px;
  background: #03172e url('/assets/christmas-coast-background.webp') center / cover no-repeat;
}
.signup-book { min-width: 0; margin: 0; text-align: center; }
.signup-book > img {
  display: block; width: auto; max-width: 100%; height: auto;
  max-height: min(720px, calc(100dvh - 90px)); margin: auto;
  object-fit: contain; filter: drop-shadow(0 8px 14px #00102060);
}
.signup-content { min-width: 0; padding: 24px 8px 10px; text-align: center; text-shadow: 0 2px 6px #001020; }
.signup-brand { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 20px; color: #fff5e8; font: bold 14px/1.4 Georgia, serif; letter-spacing: 4px; text-transform: uppercase; }
.signup-brand span { font: 30px/1 Georgia, serif; color: var(--popup-gold); }
#signup h2 { margin: 0 0 22px; color: #fff0cb; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -1.5px; font-weight: normal; text-wrap: balance; text-shadow: 0 2px #c58c32, 0 4px #794311, 0 6px 10px #000; }
#signup h2 em { color: #ffe7a1; }
.signup-description { margin: 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; }
.signup-description strong { color: #ffe68c; }
.signup-flourish { margin: 16px auto 10px; }
.signup-flourish img { display: block; width: 60%; max-width: 280px; height: 28px; margin: auto; }
.signup-support { margin: 0 0 10px; font-size: 20px; line-height: 1.4; }
#signup-delivery { margin: 0 0 18px; color: #e0d9c9; font-size: 14px; line-height: 1.5; }
#signup-form { max-width: 450px; margin: 0 auto; text-align: left; }
.signup-label { display: block; margin-bottom: 6px; font-size: 20px; line-height: 1.4; }
#signup input[type=email] { display: block; width: 100%; min-width: 0; min-height: 56px; padding: 10px 14px; border: 2px solid #f8c34a; border-radius: 15px; background: linear-gradient(110deg,#fffef5,#fff5df); color: #152637; font-size: 17px; line-height: 1.5; box-shadow: inset 0 0 0 2px #fff3c5,0 0 10px #eeb94830; }
#signup input::placeholder { color: #75674e; opacity: 1; }
.signup-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 74px; margin-top: 18px; padding: 10px 12px; border: 2px solid #fff5bd; border-radius: 38px; background: linear-gradient(115deg,#fffbb8,#ffe57e 40%,#ffcb38 80%,#ffe79a); color: #201a08; font-size: clamp(24px,3vw,38px); line-height: 1.2; font-weight: bold; box-shadow: inset 0 0 0 3px #eec34f,0 0 20px #ffcf5370; text-shadow: 0 1px #fff5ca; }
.signup-submit span { color: #88540d; font-size: .85em; }
.signup-submit:hover { background: #ffe8a4; }
.signup-submit:disabled { cursor: wait; opacity: .75; }
.signup-notice { margin: 18px 0 0; color: #e6e5e0; font-size: 14px; line-height: 1.45; text-align: center; }
#form-status { margin: 12px 0 0; font-size: 15px; line-height: 1.5; text-align: center; }
#form-status:empty { display: none; }
#signup .decline { display: block; min-height: 44px; margin: 4px auto 0; padding: 8px; color: #fff5e3; border: 0; background: transparent; font-size: 20px; text-decoration: underline; text-decoration-color: #e8c375; text-underline-offset: 8px; }
/* Compact the form before its natural height exceeds a laptop viewport.
   Narrow tablets also need this spacing because their text wraps more. */
@media (min-width: 701px) and (max-height: 900px), (min-width: 701px) and (max-width: 1000px) {
  .signup-layout { padding: 20px 32px 16px 12px; }
  .signup-content { padding: 14px 8px 4px; }
  .signup-brand { margin-bottom: 12px; font-size: 12px; }
  #signup h2 { font-size: clamp(32px,3.5vw,44px); margin-bottom: 14px; }
  .signup-description { font-size: 18px; }
  .signup-flourish { margin: 8px auto; }
  .signup-support { font-size: 17px; margin-bottom: 6px; }
  #signup-delivery { margin-bottom: 12px; }
  .signup-label { font-size: 17px; }
  #signup input[type=email] { min-height: 48px; }
  .signup-submit { font-size: 28px; min-height: 56px; margin-top: 12px; }
  .signup-notice { margin-top: 10px; font-size: 13px; }
  #signup .decline { font-size: 17px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .signup-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); }
  .signup-brand { letter-spacing: 2px; gap: 8px; }
  #signup h2 { font-size: 32px; }
}
@media (min-width: 701px) and (max-height: 560px) {
  .signup-brand, .signup-support, .signup-flourish { display: none; }
  .signup-layout { padding-block: 18px; }
  #signup h2 { font-size: 30px; margin-bottom: 10px; }
  .signup-description { font-size: 16px; margin-bottom: 8px; }
  .signup-submit { min-height: 48px; font-size: 25px; }
}
@media (max-width: 700px) {
  #signup { width: min(460px, calc(100% - 20px)); max-height: calc(100dvh - 20px); }
  .signup-scroll { max-height: calc(100dvh - 24px); }
  .signup-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 22px 12px; background-position: center; }
  /* Give the form first claim on the height; the illustration uses the rest. */
  .signup-book > img { height: clamp(100px, calc(100dvh - 580px), 230px); max-height: none; max-width: 100%; }
  .signup-content { padding: 0; }
  .signup-brand, .signup-support, .signup-flourish { display: none; }
  #signup h2 { font-size: clamp(28px, 7.5vw, 36px); margin-bottom: 10px; }
  .signup-description { font-size: 16px; margin-bottom: 8px; }
  #signup-delivery { font-size: 13px; margin-bottom: 12px; }
  .signup-label { font-size: 16px; }
  #signup input[type=email] { min-height: 48px; }
  .signup-submit { font-size: 27px; min-height: 52px; margin-top: 12px; }
  .signup-notice { margin-top: 10px; font-size: 13px; }
  #signup .decline { font-size: 16px; margin-top: 0; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .signup-layout { padding: 12px 20px 8px; gap: 8px; }
  .signup-book > img { height: clamp(100px, calc(100dvh - 460px), 110px); }
  #signup h2 { font-size: 27px; margin-bottom: 8px; }
  .signup-description { display: none; }
  #signup-delivery { margin-bottom: 10px; }
  .signup-submit { margin-top: 10px; }
}
/* Landscape phones and the on-screen keyboard leave little vertical room.
   Keep scrolling available for expanded preferences and submission feedback. */
@media (max-height: 500px) {
  .signup-layout { grid-template-columns: minmax(0, 1fr); padding: 16px 22px 10px; }
  .signup-book > img { height: 100px; max-height: none; }
  .signup-content { max-width: 520px; width: 100%; margin: auto; padding: 0; }
  #signup h2 { font-size: 26px; padding-inline: 28px; }
  .signup-brand, .signup-description, .signup-support, .signup-flourish { display: none; }
}
@media (min-width: 560px) and (max-height: 500px) {
  #signup { width: min(1000px, calc(100% - 24px)); }
  .signup-layout { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 16px; padding-right: 54px; }
  .signup-book { position: sticky; top: 16px; align-self: start; }
  .signup-book > img { height: auto; max-height: calc(100dvh - 60px); }
  #signup h2 { padding-inline: 0; }
  .signup-submit { font-size: 24px; }
}