/* A quiet, non-modal editorial invitation. The photographic masthead stays
   dark in both themes; the form panel follows the publication's theme. */
html body #editorial-capture {
  position: fixed;
  z-index: 160;
  inset: auto 24px 24px auto;
  display: block;
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0 !important;
  border-radius: 20px;
  background: var(--publication-bg, #fff) !important;
  color: var(--publication-ink, #111) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.22), 0 0 0 1px rgba(128,128,128,.22) !important;
  font-family: Inter, Arial, sans-serif;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
html body #editorial-capture.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
html body #editorial-capture .editorial-capture-close {
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  color: #fff !important;
  font: 400 28px/1 Inter, Arial, sans-serif;
  cursor: pointer;
}
html body #editorial-capture .editorial-capture-close:hover { background: rgba(255,255,255,.16); }
html body #editorial-capture .editorial-capture-visual {
  padding: 28px 28px 30px;
  background: linear-gradient(90deg,rgba(2,6,13,.86),rgba(2,6,13,.32)), url('/images/hero-earth-nasa.avif') center 48% / cover #03070d;
  color: #fff;
}
html body #editorial-capture .editorial-capture-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 28px;
  min-height: 36px;
}
html body #editorial-capture .editorial-capture-brand img { display: block; width: 40px; height: 36px; object-fit: contain; flex-shrink: 0; }
html body #editorial-capture .editorial-capture-brand span { color: #fff; font: 700 17px/22px Inter, Arial, sans-serif; letter-spacing: -.03em; }
html body #editorial-capture .editorial-capture-brand .editorial-capture-edition {
  margin-left: 6px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.35);
  color: #d2dfef;
  font: 500 10px/14px Inter, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  max-width: 96px;
}
html body #editorial-capture h2 {
  margin: 24px 0 0;
  padding: 0;
  max-width: 360px;
  color: #fff !important;
  font: 700 30px/34px Inter, Arial, sans-serif !important;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
}
html body #editorial-capture .editorial-capture-content { padding: 24px 28px; }
html body #editorial-capture #editorial-capture-description {
  display: block;
  margin: 0 0 18px;
  color: var(--publication-ink, #111);
  font: 400 15px/23px Inter, Arial, sans-serif;
  letter-spacing: -.015em;
}
html body #editorial-capture .editorial-capture-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 4px;
  border: 1px solid #c5c8cf;
  border-radius: 999px;
  background: #fff;
}
html body #editorial-capture .editorial-capture-form input[type='email'] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #111;
  font: 400 16px/22px Inter, Arial, sans-serif;
}
html body #editorial-capture input::placeholder { color: #62666f; opacity: 1; }
html body #editorial-capture .editorial-capture-form button {
  min-height: 44px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #111 !important;
  color: #fff !important;
  font: 600 13px/20px Inter, Arial, sans-serif;
  cursor: pointer;
}
html body #editorial-capture .editorial-capture-form button:hover { background: #303030 !important; }
html body #editorial-capture .editorial-capture-form button:disabled { opacity: .55; cursor: wait; }
html body #editorial-capture .editorial-capture-note {
  margin: 14px 0 0;
  color: var(--publication-muted, #5e626b);
  font: 400 11px/18px Inter, Arial, sans-serif;
}
html body #editorial-capture .editorial-capture-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
html body #editorial-capture .editorial-signup-status {
  margin: 12px 0 0;
  color: var(--publication-ink, #111);
  font: 500 13px/20px Inter, Arial, sans-serif;
}
html body #editorial-capture .editorial-signup-status:empty { display: none; }
html body #editorial-capture .editorial-capture-success { color: var(--publication-ink, #111); font: 600 16px/24px Inter, Arial, sans-serif; }
html body #editorial-capture :is(a,button,input,[tabindex]):focus-visible { outline: 2px solid #6c8cff !important; outline-offset: 3px; }
html body #editorial-capture input:focus-visible { outline-offset: -2px; }
@media (max-width: 600px) {
  html body #editorial-capture {
    inset: auto 16px max(16px,env(safe-area-inset-bottom)) 16px;
    width: auto;
    max-height: calc(100dvh - 96px);
    border-radius: 16px;
  }
  html body #editorial-capture .editorial-capture-visual { padding: 20px 22px 24px; }
  html body #editorial-capture .editorial-capture-brand { gap: 8px; }
  html body #editorial-capture .editorial-capture-brand img { width: 34px; height: 30px; }
  html body #editorial-capture .editorial-capture-brand span { font-size: 16px; }
  html body #editorial-capture .editorial-capture-brand .editorial-capture-edition { padding-left: 10px; margin-left: 2px; font-size: 9px; max-width: 75px; }
  html body #editorial-capture h2 { margin-top: 18px; font-size: 27px !important; line-height: 31px !important; }
  html body #editorial-capture .editorial-capture-content { padding: 20px 22px; }
  html body #editorial-capture #editorial-capture-description { font-size: 14px; line-height: 22px; margin-bottom: 14px; }
  html body #editorial-capture .editorial-capture-form button { padding-inline: 16px; }
}
@media (max-width: 360px) {
  html body #editorial-capture .editorial-capture-brand .editorial-capture-edition { display: none; }
  html body #editorial-capture .editorial-capture-visual, html body #editorial-capture .editorial-capture-content { padding-inline: 18px; }
  html body #editorial-capture h2 { font-size: 25px !important; line-height: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #editorial-capture { transition: none; }
}