/* ---------- drop-list popup ----------
   A macOS window, not a marketing overlay. Reuses .win, .win-bar, .lights,
   .btn, .follow-* and the type scale, so it inherits light/dark and every
   future change to the design language for free. Only the overlay, the
   positioning and the two states are new. */
.promo-pop {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(23, 24, 28, .42);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}
.promo-pop.open { display: flex; animation: promo-veil .28s ease both; }
.promo-win {
  position: relative;
  width: 100%; max-width: 430px;
  box-shadow: var(--shadow-float);
  animation: promo-rise .34s cubic-bezier(.25, .1, .25, 1) both;
}
@keyframes promo-veil { from { opacity: 0 } to { opacity: 1 } }
@keyframes promo-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}

.promo-close {
  position: absolute; top: 46px; right: 14px;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-faint); cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.promo-close:hover { color: var(--text); border-color: var(--border); background: var(--bg); }
.promo-close svg { width: 16px; height: 16px; }

.promo-body { padding: clamp(1.6rem, 5vw, 2.2rem) clamp(1.4rem, 5vw, 2rem) clamp(1.5rem, 4vw, 1.9rem); }
.promo-title { font-size: clamp(1.7rem, 5vw, 2.1rem); line-height: 1.08; margin: .35rem 0 .6rem; }
.promo-copy { color: var(--text-muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.35rem; max-width: 30rem; }

/* ---------- the form ----------
   This is the .follow-form design from the subscribe section, restated here
   scoped to .promo-pop, and that duplication is deliberate.

   .follow-* is defined in index.css and freebies.css - the two pages that
   have the inline form - and nowhere else. The popup ships on all six, so on
   typekit, typekit-lite, powergrade and filmpack there was no rule to inherit
   and the form rendered as a bare browser input. Reuse only works when the
   thing being reused is actually shared; this is not, so the popup carries
   its own. Moving .follow-* into august.css instead would mean rewriting the
   shared/page split the build derives from the reference.

   Scoped selectors are (0,2,0) against the pages' (0,1,0), and this file is
   linked last, so on index and freebies these win outright rather than by
   source order alone. */
.promo-pop .follow-form {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .6rem; margin-top: 0;
}
.promo-pop .follow-field {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 1px solid var(--border-strong); border-radius: 13px;
  background: var(--surface-2); padding: 0 .5rem 0 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.promo-pop .follow-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.promo-pop .follow-at { color: var(--text-faint); font-size: .85rem; flex: none; }
.promo-pop .follow-input {
  appearance: none; border: 0; background: transparent; color: var(--text);
  font: 500 .9rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  padding: .85rem .4rem .85rem 0; width: 100%; min-width: 0; outline: none;
}
.promo-pop .follow-input::placeholder { color: var(--text-faint); }
.promo-pop .follow-submit { width: 100%; justify-content: center; }
.promo-pop .follow-submit.is-busy { opacity: .6; pointer-events: none; }

/* The page's .follow-msg is hidden until a state attribute appears on the
   form. The popup has no such attribute, so it says its piece plainly. */
.promo-pop .follow-msg {
  display: block; width: 100%; text-align: left;
  font-size: .8rem; line-height: 1.45; color: #D62B33;
  margin: .15rem 0 0;
}
.promo-pop .follow-msg:empty { display: none; }

.promo-full { width: 100%; justify-content: center; }

.promo-dismiss {
  display: block; margin: .9rem auto 0; padding: .3rem .4rem;
  background: none; border: 0; cursor: pointer;
  color: var(--text-faint); font-size: .74rem; letter-spacing: .02em;
  transition: color .16s ease;
}
.promo-dismiss:hover { color: var(--text-muted); }

@media (max-width: 480px) {
  .promo-win { max-width: none; }
  .promo-close { top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-pop.open, .promo-win { animation: none; }
}