/* =============================================================================
   AL SIGNUP — popup + inline capture
   -----------------------------------------------------------------------------
   Speaks the shop's own design language (skin.v310.css): --al-* tokens, the one
   135deg brass gradient on the primary button, hairline borders, the stitch
   rule, Newsreader / Work Sans / Chivo. Every token carries a literal fallback
   so this file also stands up on its own — on the unsubscribe page, or if the
   skin is ever switched off.
   ========================================================================== */

.al-su-modal,
.al-su-inline,
.al-su-page {
  /* Local aliases: the skin's value if present, the leather value if not. */
  --su-ground-0: var(--al-ground-0, #0B0A08);
  --su-ground-1: var(--al-ground-1, #14120F);
  --su-ground-2: var(--al-ground-2, #1C1A16);
  --su-surface-1: var(--al-surface-1, #26231E);
  --su-surface-2: var(--al-surface-2, #302C26);
  --su-line-1: var(--al-line-1, rgba(217, 184, 124, .16));
  --su-line-2: var(--al-line-2, #4A443B);
  --su-text-hi: var(--al-text-hi, #F4EFE6);
  --su-text-mid: var(--al-text-mid, #CEC6B8);
  --su-text-dim: var(--al-text-dim, #A0978A);
  --su-text-inverse: var(--al-text-inverse, #17140F);
  --su-brass-100: var(--al-brass-100, #F0DCB4);
  --su-brass-300: var(--al-brass-300, #D9B87C);
  --su-brass-400: var(--al-brass-400, #C39A5A);
  --su-brass-tint: var(--al-brass-tint, rgba(217, 184, 124, .10));
  --su-turq-300: var(--al-turq-300, #5FD2C2);
  --su-ok: var(--al-ok, #7BD9A2);
  --su-danger: var(--al-danger, #F2938C);
  --su-grad: var(--al-grad-gold, linear-gradient(135deg, #D9B87C 0%, #C39A5A 100%));
  --su-font-display: var(--al-font-display, "Newsreader", "Hoefler Text", Georgia, serif);
  --su-font-body: var(--al-font-body, "Work Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --su-font-util: var(--al-font-util, "Chivo", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --su-r-ctrl: var(--al-r-ctrl, 10px);
  --su-r-card: var(--al-r-card, 14px);
  --su-shadow-pop: var(--al-shadow-pop, 0 18px 50px rgba(11, 10, 8, .55));
  --su-shadow-gold: var(--al-shadow-gold, 0 6px 24px rgba(195, 154, 90, .30));
  --su-ease: var(--al-ease, cubic-bezier(.25, .6, .3, 1));
  --su-stitch: var(--al-stitch, repeating-linear-gradient(90deg, rgba(217, 184, 124, .45) 0 7px, transparent 7px 14px));
}

/* Never inherit a content-box from a theme: our padded controls must fit. */
.al-su-modal,
.al-su-inline,
.al-su-page,
.al-su-modal *,
.al-su-inline *,
.al-su-page * { box-sizing: border-box; }

.al-su-modal[hidden],
.al-su-done[hidden],
.al-su-form[hidden] { display: none !important; }

/* ---------- Screen-reader helper ------------------------------------------ */
.al-su-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- The honeypot: off screen, not display:none -------------------- */
.al-su-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Modal shell --------------------------------------------------- */
.al-su-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--su-font-body);
}

.al-su-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 8, .72);
  backdrop-filter: blur(2px);
  animation: al-su-fade 240ms var(--su-ease) both;
}

.al-su-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--su-surface-1);
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-card);
  box-shadow: var(--su-shadow-pop);
  animation: al-su-rise 320ms var(--su-ease) both;
}

@keyframes al-su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-su-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.al-su-modal__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}

/* The workshop frame, graded to the shop's documentary tone. */
.al-su-modal__media {
  position: relative;
  overflow: hidden;
  background: var(--su-ground-2);
  border-right: 1px solid var(--su-line-1);
  border-radius: var(--su-r-card) 0 0 var(--su-r-card);
}
.al-su-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: var(--al-doc-filter, saturate(.72) sepia(.35) contrast(1.04) brightness(.97));
}
.al-su-modal__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--al-doc-tone, linear-gradient(180deg, rgba(217, 184, 124, .10) 0%, rgba(11, 10, 8, .26) 100%));
  pointer-events: none;
}

.al-su-modal__body { padding: 40px 40px 36px; }

.al-su-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--su-text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--su-ease), background .2s var(--su-ease);
}
.al-su-close:hover {
  color: var(--su-brass-100);
  background: var(--su-brass-tint);
}
.al-su-close:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}

/* ---------- The lockup ---------------------------------------------------- */
.al-su-kicker {
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--su-brass-400);
  margin: 0 0 14px;
}

.al-su-title {
  font-family: var(--su-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--su-text-hi);
  margin: 0;
}

.al-su-rule {
  border: 0;
  height: 2px;
  width: 64px;
  background: var(--su-stitch);
  margin: 16px 0;
}

.al-su-lede,
.al-su-modal p.al-su-lede,
.al-su-lockup p.al-su-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--su-text-mid);
  max-width: 46ch;
  margin: 0 0 24px;
}

/* ---------- The form ------------------------------------------------------ */
.al-su-form { margin: 0; }

.al-su-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.al-su-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: var(--su-surface-2);
  color: var(--su-text-hi);
  font-family: var(--su-font-body);
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-ctrl);
  padding: 15px 16px;
  box-shadow: none;
  transition: border-color .2s var(--su-ease);
  -webkit-appearance: none;
  appearance: none;
}
.al-su-input::placeholder { color: var(--su-text-dim); opacity: 1; }
.al-su-input:focus {
  border-color: var(--su-turq-300);
  outline: none;
}
.al-su-input:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}
/* The site skin paints every input border with !important
   (body.theme-rocket-wc-master input[type="email"]{ border: ... !important }),
   so the invalid state has to answer in kind or it never shows at all. */
.al-su-input[aria-invalid="true"] { border-color: var(--su-danger) !important; }

.al-su-btn,
button.al-su-btn,
a.al-su-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--su-grad);
  color: var(--su-text-inverse) !important;
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--su-r-ctrl);
  padding: 15px 26px;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s var(--su-ease), transform .2s var(--su-ease), box-shadow .2s var(--su-ease);
}
.al-su-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: var(--su-shadow-gold);
}
.al-su-btn:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 3px;
}
.al-su-btn[disabled],
.al-su-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------
   A note on the doubled-up selectors below.

   The site skin ships `body.theme-rocket-wc-master p { color: var(--al-text-mid) }`.
   That is specificity (0,1,2) and it loads AFTER this file, so a plain
   `.al-su-msg { color: ... }` at (0,1,0) loses — the error message would come
   out in ordinary body colour with nothing to say it is an error. Scoping each
   paragraph rule to its wrapper puts us at (0,2,1) and settles it without a
   single !important.
   -------------------------------------------------------------------------- */
.al-su-msg,
.al-su-formwrap p.al-su-msg {
  font-size: .875rem;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 0;
  color: var(--su-danger);
}
.al-su-msg:empty { display: none; }

.al-su-fine,
.al-su-formwrap p.al-su-fine {
  font-family: var(--su-font-body);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--su-text-dim);
  margin: 16px 0 0;
}

/* ---------- The success state --------------------------------------------- */
.al-su-done {
  animation: al-su-fade 260ms var(--su-ease) both;
}

.al-su-done__head,
.al-su-formwrap p.al-su-done__head {
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--su-brass-400);
  margin: 0 0 10px;
}

.al-su-done__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--su-ground-2);
  border: 1px solid var(--su-line-1);
  border-radius: var(--su-r-ctrl);
  padding: 16px 18px;
  margin: 0 0 14px;
}

.al-su-done__value {
  font-family: var(--su-font-util);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .10em;
  color: var(--su-brass-300);
  word-break: break-all;
}

.al-su-copybtn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--su-brass-400);
  border-radius: var(--su-r-ctrl);
  color: var(--su-brass-300);
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .2s var(--su-ease), color .2s var(--su-ease), border-color .2s var(--su-ease);
}
.al-su-copybtn:hover {
  background: var(--su-brass-tint);
  border-color: var(--su-brass-300);
  color: var(--su-brass-100);
}
.al-su-copybtn:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}

.al-su-done__msg,
.al-su-formwrap p.al-su-done__msg {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--su-text-mid);
  margin: 0 0 6px;
}

.al-su-done__note,
.al-su-formwrap p.al-su-done__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--su-text-dim);
  margin: 0;
}

.al-su-done__ok { color: var(--su-ok); }

/* ---------- Inline form (shortcode + the upgraded homepage block) --------- */
/* Alignment is inherited, so the form sits centred inside the centred
   newsletter panel and flush left wherever the shortcode is dropped into
   left-aligned prose. */
.al-su-inline {
  font-family: var(--su-font-body);
  max-width: 560px;
  margin-inline: auto;
}

.al-su-inline--upgraded { margin-top: 0; }

/* A centred host centres the lockup rule too. */
.al-news__panel .al-su-inline .al-su-rule,
.al-su-inline[style*="center"] .al-su-rule { margin-inline: auto; }

.al-su-inline .al-su-done__code { text-align: left; }

/* ---------- Small screens: a bottom sheet, never a takeover --------------- */
@media (max-width: 767px) {
  .al-su-modal__grid { grid-template-columns: 1fr; }
  .al-su-modal__media { display: none; }
  .al-su-modal__body { padding: 32px 24px 28px; }
}

@media (max-width: 639px) {
  .al-su-modal {
    align-items: flex-end;
    padding: 0;
  }
  .al-su-modal__card {
    max-width: none;
    max-height: 90vh;
    border-radius: var(--su-r-card) var(--su-r-card) 0 0;
    border-bottom: 0;
    animation: al-su-sheet 320ms var(--su-ease) both;
  }
  .al-su-modal__body { padding: 26px 20px 24px; }
  .al-su-row { flex-direction: column; }
  .al-su-btn { width: 100%; padding: 16px 22px; }
  .al-su-close { top: 6px; right: 8px; }

  /* Tighten the lockup so the field and the button stay above the fold.
     Selectors are deliberately heavy: the skin's own
     `body.theme-rocket-wc-master p.al-kicker` / `p` rules sit at (0,1,2) and
     load later, so anything lighter than this is simply ignored here. */
  .al-su-modal .al-su-modal__body p.al-su-kicker { margin-bottom: 10px; }
  .al-su-modal .al-su-modal__body .al-su-title { font-size: 1.5rem; line-height: 1.2; }
  .al-su-modal .al-su-rule { margin: 12px 0; }
  .al-su-modal .al-su-modal__body p.al-su-lede {
    font-size: .9375rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .al-su-modal .al-su-modal__body p.al-su-fine { margin-top: 12px; }
}

@keyframes al-su-sheet {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ---------- Motion safety ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .al-su-modal__card,
  .al-su-modal__scrim,
  .al-su-done { animation: none !important; }
  .al-su-btn,
  .al-su-close,
  .al-su-input,
  .al-su-copybtn { transition: none !important; }
  /* The skin's `.al-btn:hover { transform: translateY(-1px) }` is the same
     specificity as ours and loads later, so honouring the preference takes an
     !important here. Motion preferences outrank house style. */
  .al-su-btn:hover,
  button.al-su-btn:hover,
  a.al-su-btn:hover { transform: none !important; }
}

/* ---------- The unsubscribe page ----------------------------------------- */
.al-su-page {
  max-width: 560px;
  text-align: center;
  padding: 40px 32px;
  background: var(--su-surface-1);
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-card);
  box-shadow: var(--al-shadow-card, 0 10px 30px rgba(11, 10, 8, .45));
}
.al-su-page .al-su-kicker { text-align: center; }
.al-su-page__title {
  font-family: var(--su-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--su-text-hi);
  margin: 0;
}
.al-su-page .al-su-rule { margin: 16px auto; }
.al-su-page__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--su-text-mid);
  margin: 0 0 18px;
}
.al-su-page__email {
  font-family: var(--su-font-util);
  font-size: .8125rem;
  letter-spacing: .10em;
  color: var(--su-brass-300);
  margin: 0 0 24px;
  word-break: break-all;
}
.al-su-page__cta { margin: 0 0 22px; }
.al-su-page__fine {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--su-text-dim);
  margin: 0;
}