/* Newsletter prompts: the shared "thanks" state for every sign-up form, and the small slide-in card (bottom right on a computer,
   a slim bar along the bottom on a phone). The script is prompt.js. The inline card and the sidebar card live in pages/post.css. */
.es-news__form[hidden], .es-news__thanks[hidden], .es-prompt[hidden] { display: none; }
.es-news__thanks { margin: 0; padding: 14px 4px; font: 700 17px/1.4 var(--font-body); color: inherit; }
.es-news .es-news__thanks { color: #fff; margin-top: 38px; }
/* sending: the failure note under a form (the person's typing stays), the busy button, and the two things script adds inside a form
   that must take no room: the hidden robot trap and Turnstile's box (empty unless Cloudflare asks for a click) */
.es-news__error { margin: 10px 4px 0; font: 700 15px/1.4 var(--font-body); color: inherit; text-align: center; }
.es-news .es-news__error, .es-ncard .es-news__error, .es-prompt .es-news__error { color: #fff; }
.es-sidecard--news .es-news__error { color: var(--text); text-align: left; }
.es-prompt .es-news__error { margin: 8px 2px 0; text-align: left; }
.es-news__form .btn:disabled { opacity: .7; cursor: progress; }
.es-news__form .es-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.es-news__form .es-ts { flex: 0 0 100%; }
.es-news__form .es-ts:empty { display: none; }

.es-prompt { --es-prompt-gap: 24px; position: fixed; z-index: 50; right: var(--es-prompt-gap); bottom: var(--es-prompt-gap); width: 372px; max-width: calc(100vw - 2 * var(--es-prompt-gap));
  padding: 24px 24px 22px; background: var(--ink-3); color: #fff; border-radius: var(--radius-md); box-shadow: 0 22px 60px rgba(11, 27, 38, .4), 0 0 0 1.5px rgba(255, 179, 65, .6);
  opacity: 0; transform: translateY(26px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.es-prompt.is-in { opacity: 1; transform: none; }
.es-prompt__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: #fff; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background .2s; }
.es-prompt__x:hover { background: rgba(255, 255, 255, .12); }
.es-prompt__x .es-ico { width: 20px; height: 20px; }
.es-prompt__eyebrow { margin: 0 0 10px; padding-right: 44px; font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.es-prompt__h { margin: 0 0 8px; padding-right: 30px; font: 700 23px/1.12 var(--font-heading); letter-spacing: -.025em; text-wrap: balance; }
.es-prompt__p { margin: 0 0 18px; font: 400 15.5px/1.5 var(--font-body); color: var(--on-dark); }
.es-prompt .es-news__form { margin: 0; max-width: none; flex-direction: row; flex-wrap: wrap; border-radius: 18px; padding: 6px; gap: 6px; }
.es-prompt .es-news__form input { flex: none; width: 100%; height: 50px; padding: 0 14px; font-size: 16.5px; text-align: left; }
/* first name and email share one row (about 40 / 60), the button goes full width below */
.es-prompt .es-news__form input[name="FIRSTNAME"] { width: calc(40% - 3px); }
.es-prompt .es-news__form input[name="FIRSTNAME"] ~ input { width: calc(60% - 3px); border-left: 1px solid rgba(255, 255, 255, .28); border-top: 0; }
.es-prompt .es-news__form .btn { width: 100%; height: 50px; border-radius: 13px; }
.es-prompt .es-news__thanks { padding: 6px 0 2px; color: #fff; }
.es-prompt .es-news__thanks:focus { outline: none; }

/* no movement for visitors who ask for less of it, or when the site's motion switch is off */
html[data-motion="off"] .es-prompt { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .es-prompt { transition: none; transform: none; } }

/* phones: a slim bar along the bottom. --es-prompt-gap can be raised by anything else that sits at the bottom of the screen. */
@media (max-width: 640px) {
  .es-prompt { --es-prompt-gap: 8px; left: var(--es-prompt-gap); right: var(--es-prompt-gap); bottom: max(var(--es-prompt-gap), env(safe-area-inset-bottom)); width: auto; max-width: none;
    padding: 14px 14px 14px; border-radius: 20px; }
  .es-prompt__eyebrow, .es-prompt__p { display: none; }
  .es-prompt__h { margin: 0 0 10px; padding-right: 44px; font-size: 17px; line-height: 1.2; }
  .es-prompt__x { top: 4px; right: 4px; }
  .es-prompt .es-news__form { padding: 4px; gap: 4px; border-radius: 16px; }
  .es-prompt .es-news__form input { flex: none; width: 100%; height: 46px; font-size: 16px; padding: 0 12px; text-align: left; }
  .es-prompt .es-news__form input[name="FIRSTNAME"] { width: calc(40% - 2px); }
  .es-prompt .es-news__form input[name="FIRSTNAME"] ~ input { width: calc(60% - 2px); }
  .es-prompt .es-news__form .btn { width: 100%; flex: none; height: 46px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
}